ceos/unsloth
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fixed inference settings icon behavior and context info positioning

Browse source 
- Fixed top right inference settings icon to move into sidepanel during expand/collapse, matching left sidebar behavior
- Adjusted context information element positioning
This commit is contained in:
sneakr 2026-04-20 20:07:43 +02:00
commit 380dd94790
3 changed files with 71 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
studio/frontend/public/fonts/FiraCode-VariableFont_wght.ttf Normal file
View file

Binary file not shown.

58
studio/frontend/src/features/chat/chat-page.tsx
View file

@ -14,6 +14,11 @@ import {
Settings05Icon,
} from "@hugeicons/core-free-icons";
import { HugeiconsIcon } from "@hugeicons/react";
import {
Tooltip,
TooltipContent,
} from "@/components/ui/tooltip";
import { Tooltip as TooltipPrimitive } from "radix-ui";
import { useNavigate, useSearch } from "@tanstack/react-router";
import {
type ReactElement,
@ -827,9 +832,9 @@ export function ChatPage(): ReactElement {
<div className="relative flex min-h-0 min-w-0 flex-1 basis-0 flex-col overflow-hidden">
<div
className={cn(
"absolute top-0 left-0 right-2 z-30 flex h-[48px] shrink-0 items-start pt-[11px] pr-2 bg-background",
"absolute top-0 left-0 right-[10px] z-30 flex h-[48px] shrink-0 items-start pt-[11px] pr-2 bg-background",
isMobile ? "pl-12 pr-1.5" : "pl-2",
view.mode === "compare" && "right-2 left-auto w-auto bg-transparent pl-0 pr-2",
view.mode === "compare" && "right-[10px] left-auto w-auto bg-transparent pl-0 pr-2",
)}
>
<div className="flex items-center gap-1">
@ -877,25 +882,36 @@ export function ChatPage(): ReactElement {
{modelsError}
</div>
)}
<div className="flex-1" />
{view.mode === "single" && ggufContextLength && contextUsage ? (
<ContextUsageBar
used={contextUsage.totalTokens}
total={ggufContextLength}
cached={contextUsage.cachedTokens}
promptTokens={contextUsage.promptTokens}
completionTokens={contextUsage.completionTokens}
/>
) : null}
<button
type="button"
onClick={() => setSettingsOpen(!settingsOpen)}
className="flex h-[34px] w-[34px] items-center justify-center rounded-[8px] text-[#383835] dark:text-[#c7c7c4] transition-colors hover:bg-[#ececec] dark:hover:bg-[#2e3035] hover:text-black dark:hover:text-white"
title="Inference settings"
data-tour="chat-settings"
>
<HugeiconsIcon icon={Settings05Icon} className="size-5" />
</button>
<div className="ml-auto flex items-center gap-2">
{view.mode === "single" && ggufContextLength && contextUsage ? (
<ContextUsageBar
used={contextUsage.totalTokens}
total={ggufContextLength}
cached={contextUsage.cachedTokens}
promptTokens={contextUsage.promptTokens}
completionTokens={contextUsage.completionTokens}
className="h-[34px]"
/>
) : null}
{!settingsOpen && (
<Tooltip>
<TooltipPrimitive.Trigger asChild>
<button
type="button"
onClick={() => setSettingsOpen(true)}
className="flex h-[34px] w-[34px] items-center justify-center rounded-[8px] text-[#383835] dark:text-[#c7c7c4] transition-colors hover:bg-[#ececec] dark:hover:bg-[#2e3035] hover:text-black dark:hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
aria-label="Open configuration"
data-tour="chat-settings"
>
<HugeiconsIcon icon={Settings05Icon} className="size-5" />
</button>
</TooltipPrimitive.Trigger>
<TooltipContent side="bottom" sideOffset={6}>
Open configuration
</TooltipContent>
</Tooltip>
)}
</div>
</div>
{view.mode === "single" ? (

44
studio/frontend/src/features/chat/chat-settings-sheet.tsx
View file

@ -52,12 +52,17 @@ import {
CodeIcon,
Delete02Icon,
FloppyDiskIcon,
PencilEdit01Icon,
Settings02Icon,
Settings05Icon,
SlidersHorizontalIcon,
Wrench01Icon,
} from "@hugeicons/core-free-icons";
import { HugeiconsIcon } from "@hugeicons/react";
import {
Tooltip,
TooltipContent,
} from "@/components/ui/tooltip";
import { Tooltip as TooltipPrimitive } from "radix-ui";
import { AnimatePresence, motion } from "motion/react";
import type { ReactNode } from "react";
import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
@ -738,15 +743,34 @@ export function ChatSettingsPanel({
const settingsContent = (
<>
<div className="aui-thread-viewport relative h-full overflow-y-auto bg-muted/70">
<div className="sticky top-0 z-10 flex items-center gap-2 bg-muted/70 px-4 py-3 backdrop-blur">
<HugeiconsIcon
icon={PencilEdit01Icon}
className="size-4 text-muted-foreground/70"
/>
<span className="flex-1 text-base font-semibold tracking-tight">
Configuration
</span>
<div className="aui-thread-viewport relative h-full overflow-y-auto">
<div className="sticky top-0 z-10 flex h-[48px] items-start gap-2 pl-2 pr-2 pt-[11px] backdrop-blur">
{isMobile ? (
<span className="flex h-[34px] flex-1 items-center pl-1 text-base font-semibold tracking-tight">
Configuration
</span>
) : (
<>
<Tooltip>
<TooltipPrimitive.Trigger asChild>
<button
type="button"
onClick={() => onOpenChange?.(false)}
className="flex h-[34px] w-[34px] items-center justify-center rounded-[8px] text-[#383835] dark:text-[#c7c7c4] transition-colors hover:bg-[#ececec] dark:hover:bg-[#2e3035] hover:text-black dark:hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
aria-label="Close configuration"
>
<HugeiconsIcon icon={Settings05Icon} className="size-5" />
</button>
</TooltipPrimitive.Trigger>
<TooltipContent side="bottom" sideOffset={6}>
Close configuration
</TooltipContent>
</Tooltip>
<span className="flex h-[34px] flex-1 items-center text-base font-semibold tracking-tight">
Configuration
</span>
</>
)}
</div>
<div className="px-1.5">