feat: improve assistant interactions
This commit is contained in:
ajnart committed
1 parent
1642a862d9
commit
8e557fb9fd
25 files changed
+1345
-244
No files matched your search
@@ -0,0 +1,25 @@
|
||||
import { describe, expect, test } from "vitest";
|
||||
|
||||
import { getAssistantDirectiveTranslationKey, parseAssistantDirectives } from "./assistant-directives";
|
||||
|
||||
describe("assistant directives", () => {
|
||||
test("preserves text while parsing Homarr context references into visual segments", () => {
|
||||
expect(
|
||||
parseAssistantDirectives(
|
||||
"Open :app[Facebook]{name=p6ik48io64xh4p1kyz2kwxiw} with :integration[Jellyfin]{name=pui7uj2196m5a96tl5hues5r} on :board[defaultv2]{name=a7b4sb1qkwftzt5xppxuvceq}",
|
||||
),
|
||||
).toEqual([
|
||||
{ kind: "text", text: "Open " },
|
||||
{ kind: "mention", type: "app", label: "Facebook", id: "p6ik48io64xh4p1kyz2kwxiw" },
|
||||
{ kind: "text", text: " with " },
|
||||
{ kind: "mention", type: "integration", label: "Jellyfin", id: "pui7uj2196m5a96tl5hues5r" },
|
||||
{ kind: "text", text: " on " },
|
||||
{ kind: "mention", type: "board", label: "defaultv2", id: "a7b4sb1qkwftzt5xppxuvceq" },
|
||||
]);
|
||||
});
|
||||
|
||||
test("uses the tools label for model-context tools and a safe fallback for unknown directives", () => {
|
||||
expect(getAssistantDirectiveTranslationKey("tool")).toBe("tools");
|
||||
expect(getAssistantDirectiveTranslationKey("unknown")).toBe("context");
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,9 @@
|
||||
import { unstable_defaultDirectiveFormatter } from "@assistant-ui/react";
|
||||
|
||||
export const parseAssistantDirectives = (text: string) => unstable_defaultDirectiveFormatter.parse(text);
|
||||
|
||||
export const getAssistantDirectiveTranslationKey = (type: string) => {
|
||||
if (type === "tool" || type === "tools") return "tools" as const;
|
||||
if (type === "app" || type === "integration" || type === "board" || type === "widget") return type;
|
||||
return "context" as const;
|
||||
};
|
||||
@@ -24,6 +24,10 @@ describe("getAssistantTelemetry", () => {
|
||||
cacheDiscount: 0.00003,
|
||||
fallbackCount: 1,
|
||||
webSearchRequests: 2,
|
||||
webSearchSources: [
|
||||
{ url: "https://example.com/research", title: "Research source" },
|
||||
{ url: "javascript:alert(1)", title: "Unsafe source" },
|
||||
],
|
||||
steps: [
|
||||
{
|
||||
index: 1,
|
||||
@@ -42,6 +46,7 @@ describe("getAssistantTelemetry", () => {
|
||||
cacheDiscount: 0.00003,
|
||||
fallbackCount: 1,
|
||||
webSearchRequests: 2,
|
||||
webSearchSources: [{ url: "https://example.com/research", title: "Research source" }],
|
||||
routedProvider: "Alibaba",
|
||||
serviceTier: "default",
|
||||
dataRegion: "US",
|
||||
@@ -64,6 +69,7 @@ describe("getAssistantTelemetry", () => {
|
||||
cacheDiscount: 0.00003,
|
||||
fallbackCount: 1,
|
||||
webSearchRequests: 2,
|
||||
webSearchSources: [{ url: "https://example.com/research", title: "Research source" }],
|
||||
steps: [
|
||||
expect.objectContaining({
|
||||
providerLatencyMs: 964,
|
||||
@@ -72,6 +78,7 @@ describe("getAssistantTelemetry", () => {
|
||||
routedProvider: "Alibaba",
|
||||
serviceTier: "default",
|
||||
webSearchRequests: 2,
|
||||
webSearchSources: [{ url: "https://example.com/research", title: "Research source" }],
|
||||
}),
|
||||
],
|
||||
});
|
||||
|
||||
@@ -9,6 +9,11 @@ export type AssistantUsage = {
|
||||
cacheWriteTokens?: number;
|
||||
};
|
||||
|
||||
export type AssistantWebSearchSource = {
|
||||
url: string;
|
||||
title?: string;
|
||||
};
|
||||
|
||||
export type AssistantRequestStep = {
|
||||
index: number;
|
||||
durationMs: number;
|
||||
@@ -41,6 +46,7 @@ export type AssistantRequestStep = {
|
||||
fallbackCount?: number;
|
||||
fallbackLatencyMs?: number;
|
||||
webSearchRequests?: number;
|
||||
webSearchSources?: AssistantWebSearchSource[];
|
||||
isByok?: boolean;
|
||||
streamed?: boolean;
|
||||
cancelled?: boolean;
|
||||
@@ -66,6 +72,7 @@ export type AssistantRequestTelemetry = {
|
||||
fallbackCount?: number;
|
||||
fallbackLatencyMs?: number;
|
||||
webSearchRequests?: number;
|
||||
webSearchSources?: AssistantWebSearchSource[];
|
||||
costType?: "reported" | "estimated";
|
||||
finishReason?: string;
|
||||
steps: AssistantRequestStep[];
|
||||
@@ -83,6 +90,22 @@ export type AssistantUIMessage = UIMessage<AssistantMessageMetadata>;
|
||||
const getFiniteNonNegativeNumber = (value: unknown) =>
|
||||
typeof value === "number" && Number.isFinite(value) && value >= 0 ? value : undefined;
|
||||
|
||||
const getWebSearchSources = (value: unknown): AssistantWebSearchSource[] => {
|
||||
if (!Array.isArray(value)) return [];
|
||||
const sources = new Map<string, AssistantWebSearchSource>();
|
||||
for (const item of value) {
|
||||
if (!item || typeof item !== "object" || Array.isArray(item)) continue;
|
||||
const candidate = item as Record<string, unknown>;
|
||||
if (typeof candidate.url !== "string" || !URL.canParse(candidate.url)) continue;
|
||||
const url = new URL(candidate.url);
|
||||
if ((url.protocol !== "http:" && url.protocol !== "https:") || url.username || url.password) continue;
|
||||
const title = typeof candidate.title === "string" ? candidate.title.trim().slice(0, 200) : "";
|
||||
if (!sources.has(url.href)) sources.set(url.href, { url: url.href, ...(title ? { title } : {}) });
|
||||
if (sources.size >= 12) break;
|
||||
}
|
||||
return [...sources.values()];
|
||||
};
|
||||
|
||||
export const getAssistantUsage = (metadata: unknown): AssistantUsage | null => {
|
||||
if (!metadata || typeof metadata !== "object" || Array.isArray(metadata) || !("usage" in metadata)) return null;
|
||||
const usage = metadata.usage;
|
||||
@@ -213,6 +236,9 @@ export const getAssistantTelemetry = (metadata: unknown): AssistantRequestTeleme
|
||||
...(getFiniteNonNegativeNumber(candidate.webSearchRequests) !== undefined
|
||||
? { webSearchRequests: getFiniteNonNegativeNumber(candidate.webSearchRequests) }
|
||||
: {}),
|
||||
...(getWebSearchSources(candidate.webSearchSources).length > 0
|
||||
? { webSearchSources: getWebSearchSources(candidate.webSearchSources) }
|
||||
: {}),
|
||||
...(typeof candidate.isByok === "boolean" ? { isByok: candidate.isByok } : {}),
|
||||
...(typeof candidate.streamed === "boolean" ? { streamed: candidate.streamed } : {}),
|
||||
...(typeof candidate.cancelled === "boolean" ? { cancelled: candidate.cancelled } : {}),
|
||||
@@ -267,6 +293,9 @@ export const getAssistantTelemetry = (metadata: unknown): AssistantRequestTeleme
|
||||
...(getFiniteNonNegativeNumber(value.webSearchRequests) !== undefined
|
||||
? { webSearchRequests: getFiniteNonNegativeNumber(value.webSearchRequests) }
|
||||
: {}),
|
||||
...(getWebSearchSources(value.webSearchSources).length > 0
|
||||
? { webSearchSources: getWebSearchSources(value.webSearchSources) }
|
||||
: {}),
|
||||
...(value.costType === "reported" || value.costType === "estimated" ? { costType: value.costType } : {}),
|
||||
...(typeof value.finishReason === "string" ? { finishReason: value.finishReason } : {}),
|
||||
};
|
||||
|
||||
@@ -217,19 +217,8 @@
|
||||
padding: 0.6rem 0.5rem;
|
||||
}
|
||||
|
||||
.runtimeButtonGroup,
|
||||
.runtimeControls {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.modelButton {
|
||||
min-width: 0;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.reasoningButton {
|
||||
min-width: 2.5rem;
|
||||
max-width: 7.75rem;
|
||||
.runtimeSelectorTrigger {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.suggestions {
|
||||
@@ -258,24 +247,9 @@
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.runtimeButton {
|
||||
padding-inline: 0.5rem;
|
||||
}
|
||||
|
||||
.reasoningButton {
|
||||
width: 2.5rem;
|
||||
min-width: 2.5rem;
|
||||
max-width: 2.5rem;
|
||||
}
|
||||
|
||||
.reasoningButton :global(.mantine-Button-label),
|
||||
.reasoningButton :global(.mantine-Button-section[data-position="right"]) {
|
||||
.runtimeSelectorEffort {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.reasoningButton :global(.mantine-Button-section[data-position="left"]) {
|
||||
margin-inline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@container assistant-widget (max-width: 18rem) {
|
||||
@@ -365,6 +339,57 @@
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.directiveChip {
|
||||
--mention-color: var(--mantine-color-gray-light-color);
|
||||
--mention-background: var(--mantine-color-gray-light);
|
||||
|
||||
display: inline-flex;
|
||||
max-width: min(12rem, 80%);
|
||||
align-items: center;
|
||||
gap: 0.28rem;
|
||||
margin-inline: 0.12rem;
|
||||
padding: 0.08rem 0.42rem 0.08rem 0.3rem;
|
||||
border-radius: 999px;
|
||||
color: var(--mention-color);
|
||||
background: var(--mention-background);
|
||||
font-size: var(--mantine-font-size-xs);
|
||||
font-weight: 650;
|
||||
line-height: 1.55;
|
||||
vertical-align: 0.02em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.directiveChip[data-directive-type="app"] {
|
||||
--mention-color: var(--mantine-color-red-light-color);
|
||||
--mention-background: var(--mantine-color-red-light);
|
||||
}
|
||||
|
||||
.directiveChip[data-directive-type="integration"] {
|
||||
--mention-color: var(--mantine-color-blue-light-color);
|
||||
--mention-background: var(--mantine-color-blue-light);
|
||||
}
|
||||
|
||||
.directiveChip[data-directive-type="board"] {
|
||||
--mention-color: var(--mantine-color-grape-light-color);
|
||||
--mention-background: var(--mantine-color-grape-light);
|
||||
}
|
||||
|
||||
.directiveChip[data-directive-type="widget"] {
|
||||
--mention-color: var(--mantine-color-teal-light-color);
|
||||
--mention-background: var(--mantine-color-teal-light);
|
||||
}
|
||||
|
||||
.directiveChip[data-directive-type="tool"],
|
||||
.directiveChip[data-directive-type="tools"] {
|
||||
--mention-color: var(--mantine-color-orange-light-color);
|
||||
--mention-background: var(--mantine-color-orange-light);
|
||||
}
|
||||
|
||||
.directiveChipLabel {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.messageMarkdown {
|
||||
line-height: 1.65;
|
||||
overflow-wrap: anywhere;
|
||||
@@ -476,6 +501,30 @@
|
||||
border-radius: var(--mantine-radius-md);
|
||||
}
|
||||
|
||||
.mermaidStatus,
|
||||
.mermaidFallback,
|
||||
.mermaidDiagram {
|
||||
margin-block: 0.75rem;
|
||||
padding: 0.75rem;
|
||||
border-radius: var(--mantine-radius-md);
|
||||
background: var(--mantine-color-default);
|
||||
}
|
||||
|
||||
.mermaidDiagram {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.mermaidDiagram :global(svg) {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.mermaidFallback pre {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.messageMarkdown input[type="checkbox"] {
|
||||
margin-inline: -1.1rem 0.45rem;
|
||||
accent-color: var(--mantine-primary-color-filled);
|
||||
@@ -744,7 +793,8 @@
|
||||
.reasoning {
|
||||
margin-block: 0.45rem;
|
||||
padding: 0.45rem 0.6rem;
|
||||
border-inline-start: 2px solid var(--mantine-color-default-border);
|
||||
border-radius: var(--mantine-radius-md);
|
||||
background: var(--mantine-color-default);
|
||||
}
|
||||
|
||||
.reasoning summary {
|
||||
@@ -756,8 +806,19 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
.reasoningChevron {
|
||||
transition: transform 160ms cubic-bezier(0.22, 1, 0.36, 1);
|
||||
}
|
||||
|
||||
.reasoning[open] .reasoningChevron {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.reasoningContent {
|
||||
padding-top: 0.45rem;
|
||||
}
|
||||
|
||||
.reasoningText {
|
||||
margin-top: 0.45rem;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
@@ -768,6 +829,34 @@
|
||||
margin-inline-end: 0.4rem;
|
||||
}
|
||||
|
||||
.webSearchActivity {
|
||||
background: color-mix(in srgb, var(--mantine-color-blue-light) 45%, var(--mantine-color-default));
|
||||
}
|
||||
|
||||
.webSearchSources {
|
||||
margin-top: 0.65rem;
|
||||
padding-top: 0.65rem;
|
||||
border-top: 1px solid var(--mantine-color-default-border);
|
||||
}
|
||||
|
||||
.webSearchSource {
|
||||
display: inline-flex;
|
||||
max-width: min(100%, 18rem);
|
||||
align-items: center;
|
||||
gap: 0.3rem;
|
||||
padding: 0.3rem 0.5rem;
|
||||
border: 1px solid var(--mantine-color-default-border);
|
||||
border-radius: var(--mantine-radius-xl);
|
||||
color: var(--mantine-color-text);
|
||||
background: var(--mantine-color-body);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.webSearchSource:hover {
|
||||
border-color: var(--mantine-primary-color-filled);
|
||||
color: var(--mantine-primary-color-filled);
|
||||
}
|
||||
|
||||
.messageFile,
|
||||
.attachment {
|
||||
width: fit-content;
|
||||
@@ -1001,16 +1090,29 @@
|
||||
}
|
||||
|
||||
.composerInput {
|
||||
position: relative;
|
||||
min-height: 2.5rem;
|
||||
max-height: 9rem;
|
||||
flex: 1;
|
||||
resize: none;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
padding: 0.55rem 0.65rem;
|
||||
color: var(--mantine-color-text);
|
||||
background: transparent;
|
||||
font: inherit;
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.composerInput :global(.aui-lexical-input) {
|
||||
min-height: 1.5rem;
|
||||
outline: 0;
|
||||
overflow-wrap: anywhere;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.composerInput :global(.aui-lexical-placeholder) {
|
||||
position: absolute;
|
||||
inset: 0.55rem 0.65rem auto;
|
||||
color: var(--mantine-color-dimmed);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.composerHints {
|
||||
@@ -1022,49 +1124,49 @@
|
||||
padding-inline: 0.2rem;
|
||||
}
|
||||
|
||||
.runtimeControls {
|
||||
.runtimeSelectorTrigger {
|
||||
width: fit-content;
|
||||
min-width: 0;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.runtimeButtonGroup {
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.runtimeButton {
|
||||
min-width: 0;
|
||||
border-color: var(--mantine-color-default-border);
|
||||
max-width: min(24rem, 100%);
|
||||
padding: 0.3rem 0.45rem;
|
||||
border: 1px solid var(--mantine-color-default-border);
|
||||
border-radius: var(--mantine-radius-sm);
|
||||
color: var(--mantine-color-text);
|
||||
background: var(--mantine-color-body);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.runtimeButton:hover {
|
||||
.runtimeSelectorTrigger:hover {
|
||||
background: var(--mantine-color-default-hover);
|
||||
}
|
||||
|
||||
.runtimeButtonLabel {
|
||||
.runtimeSelectorTrigger:focus-visible {
|
||||
outline: 2px solid var(--mantine-primary-color-filled);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.runtimeSelectorTrigger:disabled {
|
||||
opacity: 0.55;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.runtimeSelectorIcon {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.runtimeSelectorName {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.modelButton {
|
||||
min-width: 8rem;
|
||||
max-width: 15rem;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.modelButton :global(.mantine-Button-label) {
|
||||
font-size: var(--mantine-font-size-xs);
|
||||
}
|
||||
|
||||
.reasoningButton {
|
||||
min-width: 7.5rem;
|
||||
max-width: 10.5rem;
|
||||
flex: 0 1 auto;
|
||||
.runtimeSelectorEffort {
|
||||
display: inline-flex;
|
||||
flex: 0 0 auto;
|
||||
align-items: center;
|
||||
gap: 0.2rem;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.modelDropdown {
|
||||
@@ -1086,15 +1188,23 @@
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.modelOptionMeta {
|
||||
flex: 0 0 auto;
|
||||
color: var(--mantine-color-dimmed);
|
||||
}
|
||||
|
||||
.runtimeOptionCheck {
|
||||
flex: 0 0 auto;
|
||||
color: var(--mantine-primary-color-filled);
|
||||
}
|
||||
|
||||
.runtimeMenuItem[data-selected] {
|
||||
color: var(--mantine-primary-color-filled);
|
||||
background: var(--mantine-primary-color-light);
|
||||
font-weight: 600;
|
||||
.reasoningSelector {
|
||||
padding: 0.55rem;
|
||||
}
|
||||
|
||||
.reasoningSegmentedControl :global(.mantine-SegmentedControl-label) {
|
||||
padding-inline: 0.35rem;
|
||||
font-size: 0.68rem;
|
||||
}
|
||||
|
||||
.triggerPopover {
|
||||
@@ -1140,11 +1250,6 @@
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.composerInput::placeholder {
|
||||
color: var(--mantine-color-dimmed);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.empty {
|
||||
display: flex;
|
||||
min-height: 23rem;
|
||||
@@ -1249,21 +1354,8 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
.runtimeControls {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.runtimeButtonGroup {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.modelButton {
|
||||
min-width: 0;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.reasoningButton {
|
||||
max-width: 9rem;
|
||||
.runtimeSelectorTrigger {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.suggestions {
|
||||
@@ -1316,11 +1408,6 @@
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.reasoningButton {
|
||||
min-width: 2.5rem;
|
||||
max-width: 7.75rem;
|
||||
}
|
||||
|
||||
.approvalActions {
|
||||
flex-direction: column;
|
||||
}
|
||||
@@ -1345,7 +1432,9 @@
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.activityBar,
|
||||
.floatingPanel,
|
||||
.contextMeter {
|
||||
.contextMeter,
|
||||
.disclosureIcon,
|
||||
.reasoningChevron {
|
||||
animation: none;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import type { ComponentPropsWithoutRef, RefObject } from "react";
|
||||
import { createContext, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
|
||||
import type { ComponentPropsWithoutRef, ReactNode, RefObject } from "react";
|
||||
import { createContext, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
|
||||
import type {
|
||||
FileMessagePartProps,
|
||||
ImageMessagePartProps,
|
||||
@@ -17,19 +17,23 @@ import {
|
||||
BranchPickerPrimitive,
|
||||
ComposerPrimitive,
|
||||
ErrorPrimitive,
|
||||
MessagePartPrimitive,
|
||||
MessagePrimitive,
|
||||
SelectionToolbarPrimitive,
|
||||
ThreadListItemPrimitive,
|
||||
ThreadListPrimitive,
|
||||
ThreadPrimitive,
|
||||
groupPartByType,
|
||||
useAui,
|
||||
useAuiState,
|
||||
useMessagePartText,
|
||||
unstable_useMentionAdapter,
|
||||
unstable_useSlashCommandAdapter,
|
||||
unstable_useTriggerPopoverScopeContext,
|
||||
} from "@assistant-ui/react";
|
||||
import { LexicalComposerInput } from "@assistant-ui/react-lexical";
|
||||
import type { DirectiveChipProps } from "@assistant-ui/react-lexical";
|
||||
import { MarkdownTextPrimitive } from "@assistant-ui/react-markdown";
|
||||
import type { SyntaxHighlighterProps } from "@assistant-ui/react-markdown";
|
||||
import {
|
||||
ActionIcon,
|
||||
Anchor,
|
||||
@@ -43,16 +47,17 @@ import {
|
||||
Group,
|
||||
Image,
|
||||
Loader,
|
||||
Menu,
|
||||
Popover,
|
||||
RingProgress,
|
||||
ScrollArea,
|
||||
SegmentedControl,
|
||||
Stack,
|
||||
Text,
|
||||
ThemeIcon,
|
||||
Tooltip,
|
||||
UnstyledButton,
|
||||
useCombobox,
|
||||
useComputedColorScheme,
|
||||
} from "@mantine/core";
|
||||
import { useReducedMotion, useWindowEvent } from "@mantine/hooks";
|
||||
import {
|
||||
@@ -78,6 +83,7 @@ import {
|
||||
IconPaperclip,
|
||||
IconPalette,
|
||||
IconPencil,
|
||||
IconPhoto,
|
||||
IconHistory,
|
||||
IconPlayerStop,
|
||||
IconPlus,
|
||||
@@ -103,6 +109,7 @@ import { useScopedI18n } from "@homarr/translation/client";
|
||||
|
||||
import classes from "./assistant-panel.module.css";
|
||||
import { useAssistantAutoApproval, useAssistantAutomaticAction } from "./assistant-auto-approval";
|
||||
import { getAssistantDirectiveTranslationKey, parseAssistantDirectives } from "./assistant-directives";
|
||||
import { normalizeAssistantMarkdown } from "./assistant-markdown";
|
||||
import { getSafeAssistantMarkdownImageSource } from "./assistant-markdown-image";
|
||||
import { getAssistantTelemetry, getAssistantUsage } from "./assistant-message-metadata";
|
||||
@@ -139,6 +146,34 @@ interface AssistantPanelProps extends AssistantConversationControls {
|
||||
|
||||
const markdownRemarkPlugins = [remarkGfm, remarkBreaks];
|
||||
|
||||
const contextIcons = {
|
||||
app: IconApps,
|
||||
integration: IconLink,
|
||||
board: IconMessage,
|
||||
widget: IconTool,
|
||||
tool: IconTool,
|
||||
tools: IconTool,
|
||||
};
|
||||
|
||||
const ContextDirectiveChip = ({ directiveId, directiveType, label }: DirectiveChipProps) => {
|
||||
const t = useScopedI18n("common.assistant");
|
||||
const Icon = contextIcons[directiveType as keyof typeof contextIcons] ?? IconAt;
|
||||
const translationKey = getAssistantDirectiveTranslationKey(directiveType);
|
||||
const typeLabel = t(`mentions.${translationKey}`);
|
||||
|
||||
return (
|
||||
<span
|
||||
className={classes.directiveChip}
|
||||
data-directive-type={directiveType}
|
||||
data-directive-id={directiveId}
|
||||
title={`${typeLabel}: ${label}`}
|
||||
>
|
||||
<Icon size={12} aria-hidden />
|
||||
<span className={classes.directiveChipLabel}>{label}</span>
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
const MarkdownLink = ({ href, children, ...props }: ComponentPropsWithoutRef<"a">) => {
|
||||
const external = href !== undefined && /^https?:\/\//iu.test(href);
|
||||
return (
|
||||
@@ -171,17 +206,104 @@ const MarkdownImage = ({ src, alt = "", ...props }: ComponentPropsWithoutRef<"im
|
||||
);
|
||||
};
|
||||
|
||||
const MermaidDiagram = ({ code, components }: SyntaxHighlighterProps) => {
|
||||
const t = useScopedI18n("common.assistant");
|
||||
const colorScheme = useComputedColorScheme("light");
|
||||
const diagramId = `assistant-mermaid-${useId().replaceAll(/[^A-Za-z0-9_-]/gu, "")}`;
|
||||
const [rendered, setRendered] = useState<{ code: string; svg?: string; failed?: boolean }>({ code });
|
||||
|
||||
useEffect(() => {
|
||||
let active = true;
|
||||
setRendered({ code });
|
||||
void import("mermaid")
|
||||
.then(async ({ default: mermaid }) => {
|
||||
mermaid.initialize({
|
||||
startOnLoad: false,
|
||||
securityLevel: "strict",
|
||||
suppressErrorRendering: true,
|
||||
theme: colorScheme === "dark" ? "dark" : "neutral",
|
||||
fontFamily: "Inter, system-ui, sans-serif",
|
||||
});
|
||||
return await mermaid.render(diagramId, code);
|
||||
})
|
||||
.then(({ svg }) => {
|
||||
if (active) setRendered({ code, svg });
|
||||
})
|
||||
.catch(() => {
|
||||
document.getElementById(`d${diagramId}`)?.remove();
|
||||
if (active) setRendered({ code, failed: true });
|
||||
});
|
||||
|
||||
return () => {
|
||||
active = false;
|
||||
};
|
||||
}, [code, colorScheme, diagramId]);
|
||||
|
||||
if (rendered.code !== code || (!rendered.svg && !rendered.failed)) {
|
||||
return (
|
||||
<Group component="output" className={classes.mermaidStatus} gap="xs">
|
||||
<Loader type="bars" size="xs" />
|
||||
<Text size="xs" c="dimmed">
|
||||
{t("markdown.renderingDiagram")}
|
||||
</Text>
|
||||
</Group>
|
||||
);
|
||||
}
|
||||
if (rendered.failed || !rendered.svg) {
|
||||
const Pre = components.Pre;
|
||||
const Code = components.Code;
|
||||
return (
|
||||
<Box className={classes.mermaidFallback}>
|
||||
<Text size="xs" c="dimmed" mb="xs">
|
||||
{t("markdown.diagramUnavailable")}
|
||||
</Text>
|
||||
<Pre>
|
||||
<Code>{code}</Code>
|
||||
</Pre>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<Box
|
||||
component="figure"
|
||||
className={classes.mermaidDiagram}
|
||||
aria-label={t("markdown.diagram")}
|
||||
dangerouslySetInnerHTML={{ __html: rendered.svg }}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const AssistantTextPart = () => (
|
||||
<MarkdownTextPrimitive
|
||||
className={classes.messageMarkdown}
|
||||
preprocess={normalizeAssistantMarkdown}
|
||||
remarkPlugins={markdownRemarkPlugins}
|
||||
components={{ a: MarkdownLink, img: MarkdownImage, table: MarkdownTable }}
|
||||
componentsByLanguage={{ mermaid: { SyntaxHighlighter: MermaidDiagram } }}
|
||||
defer
|
||||
/>
|
||||
);
|
||||
|
||||
const UserTextPart = () => <MessagePartPrimitive.Text className={classes.messageText} />;
|
||||
const UserTextPart = () => {
|
||||
const { text } = useMessagePartText();
|
||||
const segments = parseAssistantDirectives(text);
|
||||
return (
|
||||
<span className={classes.messageText}>
|
||||
{segments.map((segment, index) =>
|
||||
segment.kind === "text" ? (
|
||||
<span key={`${index}:${segment.text}`}>{segment.text}</span>
|
||||
) : (
|
||||
<ContextDirectiveChip
|
||||
key={`${index}:${segment.type}:${segment.id}`}
|
||||
directiveId={segment.id}
|
||||
directiveType={segment.type}
|
||||
label={segment.label}
|
||||
/>
|
||||
),
|
||||
)}
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
const Attachment = ({ removable = false }: { removable?: boolean }) => {
|
||||
const t = useScopedI18n("common.assistant");
|
||||
@@ -203,21 +325,30 @@ const Attachment = ({ removable = false }: { removable?: boolean }) => {
|
||||
};
|
||||
const SentAttachment = () => <Attachment />;
|
||||
|
||||
const ReasoningPart = ({ text, status }: ReasoningMessagePartProps) => {
|
||||
const ReasoningPart = ({ text }: ReasoningMessagePartProps) => (
|
||||
<Text component="div" size="sm" c="dimmed" className={classes.reasoningText}>
|
||||
{text}
|
||||
</Text>
|
||||
);
|
||||
|
||||
const ReasoningGroup = ({ children, running }: { children: ReactNode; running: boolean }) => {
|
||||
const t = useScopedI18n("common.assistant");
|
||||
return (
|
||||
<details className={classes.reasoning} open={status.type === "running"}>
|
||||
<details className={classes.reasoning} open={running}>
|
||||
<summary>
|
||||
<Group gap="xs" wrap="nowrap">
|
||||
<Loader type="bars" size="xs" color="gray" style={{ opacity: status.type === "running" ? 1 : 0 }} />
|
||||
<Text size="xs" fw={600} c="dimmed">
|
||||
{t("reasoning")}
|
||||
</Text>
|
||||
<Group gap="xs" wrap="nowrap" justify="space-between">
|
||||
<Group gap="xs" wrap="nowrap">
|
||||
{running ? <Loader type="bars" size="xs" color="gray" /> : <IconBrain size={14} />}
|
||||
<Text size="xs" fw={600} c="dimmed">
|
||||
{t("reasoning")}
|
||||
</Text>
|
||||
</Group>
|
||||
<IconChevronDown size={14} className={classes.reasoningChevron} />
|
||||
</Group>
|
||||
</summary>
|
||||
<Text size="sm" c="dimmed" className={classes.reasoningText}>
|
||||
{text}
|
||||
</Text>
|
||||
<Box className={classes.reasoningContent} aria-busy={running}>
|
||||
{children}
|
||||
</Box>
|
||||
</details>
|
||||
);
|
||||
};
|
||||
@@ -1289,19 +1420,95 @@ const RuntimeError = () => {
|
||||
);
|
||||
};
|
||||
|
||||
const WebSearchActivity = () => {
|
||||
const t = useScopedI18n("common.assistant");
|
||||
const metadata = useAuiState((state) => state.message.metadata);
|
||||
const telemetry = getAssistantTelemetry(metadata);
|
||||
if (!telemetry) return null;
|
||||
const sources = telemetry.webSearchSources ?? [];
|
||||
if (telemetry.webSearchRequests === undefined && sources.length === 0) return null;
|
||||
|
||||
return (
|
||||
<Box className={`${classes.tool} ${classes.webSearchActivity}`}>
|
||||
<Group justify="space-between" align="flex-start" wrap="nowrap" gap="sm">
|
||||
<Group gap="xs" wrap="nowrap" align="flex-start">
|
||||
<ThemeIcon size="sm" radius="xl" variant="light" color="blue">
|
||||
<IconSearch size={13} />
|
||||
</ThemeIcon>
|
||||
<div>
|
||||
<Text size="sm" fw={600}>
|
||||
{t("webSearch.title")}
|
||||
</Text>
|
||||
<Text size="xs" c="dimmed">
|
||||
{t("webSearch.completed")}
|
||||
</Text>
|
||||
</div>
|
||||
</Group>
|
||||
<Group gap={4} wrap="wrap" justify="flex-end">
|
||||
{telemetry.webSearchRequests !== undefined && (
|
||||
<Badge size="xs" variant="light" color="blue">
|
||||
{t("webSearch.searches", { count: telemetry.webSearchRequests })}
|
||||
</Badge>
|
||||
)}
|
||||
{sources.length > 0 && (
|
||||
<Badge size="xs" variant="light" color="gray">
|
||||
{t("webSearch.sources", { count: sources.length })}
|
||||
</Badge>
|
||||
)}
|
||||
</Group>
|
||||
</Group>
|
||||
{sources.length > 0 && (
|
||||
<Group className={classes.webSearchSources} gap="xs" wrap="wrap">
|
||||
{sources.map((source) => (
|
||||
<Anchor
|
||||
key={source.url}
|
||||
className={classes.webSearchSource}
|
||||
href={source.url}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
size="xs"
|
||||
title={source.title ?? source.url}
|
||||
>
|
||||
<IconLink size={13} />
|
||||
<Text component="span" inherit lineClamp={1}>
|
||||
{source.title ?? new URL(source.url).hostname}
|
||||
</Text>
|
||||
</Anchor>
|
||||
))}
|
||||
</Group>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
const AssistantMessage = () => (
|
||||
<MessagePrimitive.Root className={`${classes.message} ${classes.assistantMessage}`}>
|
||||
<MessagePrimitive.Parts
|
||||
components={{
|
||||
Text: AssistantTextPart,
|
||||
Reasoning: ReasoningPart,
|
||||
Source: SourcePart,
|
||||
File: FilePart,
|
||||
Image: ImagePart,
|
||||
tools: { Fallback: ToolPart },
|
||||
<MessagePrimitive.GroupedParts groupBy={groupPartByType({ reasoning: ["group-reasoning"] })}>
|
||||
{({ part, children }) => {
|
||||
switch (part.type) {
|
||||
case "group-reasoning":
|
||||
return <ReasoningGroup running={part.status.type === "running"}>{children}</ReasoningGroup>;
|
||||
case "text":
|
||||
return <AssistantTextPart />;
|
||||
case "reasoning":
|
||||
return <ReasoningPart {...part} />;
|
||||
case "source":
|
||||
return <SourcePart {...part} />;
|
||||
case "file":
|
||||
return <FilePart {...part} />;
|
||||
case "image":
|
||||
return <ImagePart {...part} />;
|
||||
case "tool-call":
|
||||
return part.toolUI ?? <ToolPart {...part} />;
|
||||
case "indicator":
|
||||
return null;
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</MessagePrimitive.GroupedParts>
|
||||
<RuntimeError />
|
||||
<WebSearchActivity />
|
||||
<RequestTelemetry />
|
||||
<AssistantMessageActions />
|
||||
</MessagePrimitive.Root>
|
||||
@@ -1543,14 +1750,6 @@ const EmptyThread = () => {
|
||||
);
|
||||
};
|
||||
|
||||
const contextIcons = {
|
||||
app: IconApps,
|
||||
integration: IconLink,
|
||||
board: IconMessage,
|
||||
widget: IconTool,
|
||||
tools: IconTool,
|
||||
};
|
||||
|
||||
const TriggerPopoverAutoScroll = ({ viewportRef }: { viewportRef: RefObject<HTMLDivElement | null> }) => {
|
||||
const { activeCategoryId, categories, highlightedIndex, isSearchMode, items, open, query } =
|
||||
unstable_useTriggerPopoverScopeContext();
|
||||
@@ -1727,6 +1926,16 @@ const ComposerTriggers = () => {
|
||||
|
||||
type ComposerProps = AssistantConversationControls & { pendingAction: AssistantPendingAction | undefined };
|
||||
|
||||
const getModelProviderLabel = (modelId: string, fallback: string) => {
|
||||
const separator = modelId.indexOf("/");
|
||||
if (separator <= 0) return fallback;
|
||||
const provider = modelId.slice(0, separator).replaceAll(/[-_]/gu, " ");
|
||||
return `${provider.charAt(0).toLocaleUpperCase()}${provider.slice(1)}`;
|
||||
};
|
||||
|
||||
const formatCompactModelNumber = (value: number) =>
|
||||
new Intl.NumberFormat(undefined, { notation: "compact", maximumFractionDigits: 1 }).format(value);
|
||||
|
||||
const RuntimeControls = ({
|
||||
modelId,
|
||||
models,
|
||||
@@ -1747,6 +1956,13 @@ const RuntimeControls = ({
|
||||
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();
|
||||
@@ -1765,40 +1981,45 @@ const RuntimeControls = ({
|
||||
};
|
||||
|
||||
return (
|
||||
<Group className={classes.runtimeControls} gap={0} wrap="nowrap">
|
||||
<Button.Group
|
||||
className={classes.runtimeButtonGroup}
|
||||
aria-label={`${t("runtime.model")}, ${t("runtime.thinking")}`}
|
||||
>
|
||||
<Combobox store={modelCombobox} onOptionSubmit={selectModel} withinPortal position="top-start" width={320}>
|
||||
<Combobox.Target>
|
||||
<Button
|
||||
className={classes.modelButton}
|
||||
classNames={{ root: classes.runtimeButton, label: classes.runtimeButtonLabel }}
|
||||
variant="default"
|
||||
size="compact-sm"
|
||||
disabled={modelOptionsLoading || models.length === 0}
|
||||
leftSection={modelOptionsLoading ? <Loader size={13} /> : <IconSparkles size={14} />}
|
||||
rightSection={<Combobox.Chevron size="xs" />}
|
||||
onClick={() => modelCombobox.toggleDropdown()}
|
||||
aria-label={`${t("runtime.model")}: ${selectedModel?.name ?? t("runtime.noModels")}`}
|
||||
title={selectedModel?.name}
|
||||
>
|
||||
<Combobox store={modelCombobox} onOptionSubmit={selectModel} withinPortal position="top-start" width={360}>
|
||||
<Combobox.Target>
|
||||
<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")}: ${t(`runtime.reasoning.${reasoning}`)}`}
|
||||
aria-expanded={modelCombobox.dropdownOpened}
|
||||
>
|
||||
<Group gap="xs" wrap="nowrap">
|
||||
<ThemeIcon className={classes.runtimeSelectorIcon} size="sm" variant="light" color="gray">
|
||||
{modelOptionsLoading ? <Loader size={12} /> : <IconSparkles size={13} />}
|
||||
</ThemeIcon>
|
||||
<Text className={classes.runtimeSelectorName} size="xs" fw={650} lineClamp={1}>
|
||||
{selectedModel?.name ?? t("runtime.model")}
|
||||
</Button>
|
||||
</Combobox.Target>
|
||||
<Combobox.Dropdown className={classes.modelDropdown}>
|
||||
<Combobox.Search
|
||||
value={modelSearch}
|
||||
onChange={(event) => {
|
||||
setModelSearch(event.currentTarget.value);
|
||||
modelCombobox.updateSelectedOptionIndex();
|
||||
}}
|
||||
placeholder={t("runtime.model")}
|
||||
aria-label={t("runtime.model")}
|
||||
/>
|
||||
<Combobox.Options className={classes.modelOptions}>
|
||||
{visibleModels.map((model) => (
|
||||
</Text>
|
||||
<Badge className={classes.runtimeSelectorEffort} size="xs" variant="light" color="gray">
|
||||
<IconBrain size={11} />
|
||||
{t(`runtime.reasoning.${reasoning}`)}
|
||||
</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")}
|
||||
/>
|
||||
<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}
|
||||
@@ -1806,54 +2027,63 @@ const RuntimeControls = ({
|
||||
active={model.id === modelId}
|
||||
>
|
||||
<Group gap="xs" wrap="nowrap">
|
||||
<Stack gap={0} className={classes.modelOptionText}>
|
||||
<ThemeIcon size="md" radius="md" variant="light" color="gray">
|
||||
<IconSparkles size={14} />
|
||||
</ThemeIcon>
|
||||
<Stack gap={1} className={classes.modelOptionText}>
|
||||
<Text size="sm" fw={model.id === modelId ? 650 : 500} lineClamp={1}>
|
||||
{model.name}
|
||||
</Text>
|
||||
<Text size="xs" c="dimmed" lineClamp={1}>
|
||||
{model.id}
|
||||
{model.description?.trim() || model.id}
|
||||
</Text>
|
||||
</Stack>
|
||||
{model.id === modelId && <IconCheck size={15} className={classes.runtimeOptionCheck} />}
|
||||
<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>
|
||||
))}
|
||||
{visibleModels.length === 0 && <Combobox.Empty>{t("runtime.noModels")}</Combobox.Empty>}
|
||||
</Combobox.Options>
|
||||
</Combobox.Dropdown>
|
||||
</Combobox>
|
||||
<Menu position="top-end" width={210} withinPortal>
|
||||
<Menu.Target>
|
||||
<Button
|
||||
className={classes.reasoningButton}
|
||||
classNames={{ root: classes.runtimeButton, label: classes.runtimeButtonLabel }}
|
||||
variant="default"
|
||||
size="compact-sm"
|
||||
leftSection={<IconBrain size={14} />}
|
||||
rightSection={<IconChevronUp size={14} />}
|
||||
aria-label={`${t("runtime.thinking")}: ${t(`runtime.reasoning.${reasoning}`)}`}
|
||||
title={t(`runtime.reasoning.${reasoning}`)}
|
||||
>
|
||||
{t(`runtime.reasoning.${reasoning}`)}
|
||||
</Button>
|
||||
</Menu.Target>
|
||||
<Menu.Dropdown>
|
||||
<Menu.Label>{t("runtime.thinking")}</Menu.Label>
|
||||
{assistantReasoningModes.map((mode) => (
|
||||
<Menu.Item
|
||||
key={mode}
|
||||
className={classes.runtimeMenuItem}
|
||||
data-selected={mode === reasoning || undefined}
|
||||
rightSection={mode === reasoning ? <IconCheck size={15} /> : null}
|
||||
onClick={() => onReasoningChange(mode)}
|
||||
>
|
||||
{t(`runtime.reasoning.${mode}`)}
|
||||
</Menu.Item>
|
||||
))}
|
||||
</Menu.Dropdown>
|
||||
</Menu>
|
||||
</Button.Group>
|
||||
</Group>
|
||||
</Combobox.Group>
|
||||
))}
|
||||
{visibleModels.length === 0 && <Combobox.Empty>{t("runtime.noModels")}</Combobox.Empty>}
|
||||
</Combobox.Options>
|
||||
<Divider />
|
||||
<Box className={classes.reasoningSelector}>
|
||||
<Group gap="xs" mb={6} wrap="nowrap">
|
||||
<IconBrain size={14} />
|
||||
<Text size="xs" fw={650}>
|
||||
{t("runtime.thinking")}
|
||||
</Text>
|
||||
</Group>
|
||||
<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}`),
|
||||
}))}
|
||||
/>
|
||||
</Box>
|
||||
</Combobox.Dropdown>
|
||||
</Combobox>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1893,10 +2123,12 @@ const Composer = (props: ComposerProps) => {
|
||||
</ComposerPrimitive.AddAttachment>
|
||||
</Tooltip>
|
||||
</Group>
|
||||
<ComposerPrimitive.Input
|
||||
<LexicalComposerInput
|
||||
className={classes.composerInput}
|
||||
placeholder={t("composerPlaceholder")}
|
||||
rows={1}
|
||||
directiveChip={ContextDirectiveChip}
|
||||
// oxlint-disable-next-line jsx-a11y/no-autofocus -- opening the assistant is an explicit intent to compose
|
||||
autoFocus
|
||||
data-autofocus
|
||||
/>
|
||||
{running ? (
|
||||
|
||||
@@ -3,8 +3,24 @@ import { describe, expect, test } from "vitest";
|
||||
import { resolveAssistantPreferenceModelId, resolveAssistantThreadPreferenceModelId } from "./assistant-preferences";
|
||||
|
||||
const models = [
|
||||
{ id: "provider/default", name: "Default", inputModalities: ["text"] },
|
||||
{ id: "provider/alternate", name: "Alternate", inputModalities: ["text"] },
|
||||
{
|
||||
id: "provider/default",
|
||||
name: "Default",
|
||||
description: null,
|
||||
contextLength: null,
|
||||
promptPrice: null,
|
||||
completionPrice: null,
|
||||
inputModalities: ["text"],
|
||||
},
|
||||
{
|
||||
id: "provider/alternate",
|
||||
name: "Alternate",
|
||||
description: null,
|
||||
contextLength: null,
|
||||
promptPrice: null,
|
||||
completionPrice: null,
|
||||
inputModalities: ["text"],
|
||||
},
|
||||
];
|
||||
|
||||
describe("resolveAssistantPreferenceModelId", () => {
|
||||
|
||||
@@ -3,6 +3,10 @@ export type { AssistantReasoningMode } from "@homarr/definitions";
|
||||
export type AssistantRuntimeModelOption = {
|
||||
id: string;
|
||||
name: string;
|
||||
description: string | null;
|
||||
contextLength: number | null;
|
||||
promptPrice: string | null;
|
||||
completionPrice: string | null;
|
||||
inputModalities: string[];
|
||||
};
|
||||
|
||||
|
||||
@@ -186,7 +186,16 @@ const AssistantPreferencesProvider = ({ children }: PropsWithChildren) => {
|
||||
reasoning: "auto",
|
||||
});
|
||||
const models = useMemo<AssistantRuntimeModelOption[]>(
|
||||
() => data?.models.map(({ id, name, inputModalities }) => ({ id, name, inputModalities })) ?? [],
|
||||
() =>
|
||||
data?.models.map(({ id, name, description, contextLength, promptPrice, completionPrice, inputModalities }) => ({
|
||||
id,
|
||||
name,
|
||||
description,
|
||||
contextLength,
|
||||
promptPrice,
|
||||
completionPrice,
|
||||
inputModalities,
|
||||
})) ?? [],
|
||||
[data?.models],
|
||||
);
|
||||
|
||||
|
||||
Reference in new issue
Block a user