From cd67cb22232616f9fb33054dffe1126ab02d5667 Mon Sep 17 00:00:00 2001 From: Unsloth Date: Thu, 28 May 2026 17:06:07 -0700 Subject: [PATCH 01/17] studio: redesign chat composer Reworks the new-chat composer and the compare composer into a single rounded pill surface with a softer, lighter look. - New welcome screen with a time-of-day sloth mascot and a lighter heading. - One rounded composer surface with a soft drop shadow. The input grows inline as you type and collapses back to a single row when cleared. - Tools and attachments live in a single plus menu; the thinking control is a compact pill with a reasoning-effort submenu. - Inlined glyphs for the thinking, send, and dictate controls, kept in sync across the main and compare composers. - Toast notifications match the composer surface: no border line, the same drop shadow, and the same dark surface color, with a ring-less close button. - Dark mode: the side-menu shadow blends into the background, hovered menu rows read clearly, and their roundness matches light mode. - Composer styles use dedicated unsloth- prefixed classes so compare mode keeps its own stacked layout. --- .../src/components/assistant-ui/thread.tsx | 697 ++++++++++++------ studio/frontend/src/components/ui/sonner.tsx | 3 +- .../chat/components/model-load-status.tsx | 2 +- .../src/features/chat/shared-composer.tsx | 355 +++++---- studio/frontend/src/index.css | 202 ++++- 5 files changed, 858 insertions(+), 401 deletions(-) diff --git a/studio/frontend/src/components/assistant-ui/thread.tsx b/studio/frontend/src/components/assistant-ui/thread.tsx index 51cf000863..c33ec403f4 100644 --- a/studio/frontend/src/components/assistant-ui/thread.tsx +++ b/studio/frontend/src/components/assistant-ui/thread.tsx @@ -2,11 +2,9 @@ // Copyright 2026-present the Unsloth AI Inc. team. All rights reserved. See /studio/LICENSE.AGPL-3.0 import { - ComposerAddAttachment, ComposerAttachments, UserMessageAttachments, } from "@/components/assistant-ui/attachment"; -import { CodeToggleIcon } from "@/components/assistant-ui/code-toggle-icon"; import { GeneratedImageOverlayProvider, useGeneratedImageOverlay, @@ -39,6 +37,11 @@ import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, + DropdownMenuLabel, + DropdownMenuSeparator, + DropdownMenuSub, + DropdownMenuSubContent, + DropdownMenuSubTrigger, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import { sentAudioNames } from "@/features/chat/api/chat-adapter"; @@ -67,31 +70,40 @@ import { useAuiState, } from "@assistant-ui/react"; import { flushResourcesSync } from "@assistant-ui/tap"; +import { + AttachmentIcon, + CodeIcon, + Copy01Icon, + Delete02Icon, + Edit03Icon, + File02Icon, + Folder01Icon, + Image03Icon, + PencilRulerIcon, + Tick02Icon, +} from "@hugeicons/core-free-icons"; +import { HugeiconsIcon } from "@hugeicons/react"; +import { useNavigate } from "@tanstack/react-router"; import { ArrowDownIcon, ArrowUpIcon, + CheckIcon, ChevronLeftIcon, ChevronRightIcon, + Columns2Icon, DownloadIcon, + FolderPlusIcon, GlobeIcon, HeadphonesIcon, - LightbulbIcon, - LightbulbOffIcon, - MicIcon, + LibraryIcon, MoreHorizontalIcon, + PlugIcon, + PlusIcon, RefreshCwIcon, SquareIcon, TerminalIcon, XIcon, } from "lucide-react"; -import { - Copy01Icon, - Delete02Icon, - Edit03Icon, - Image03Icon, - Tick02Icon, -} from "@hugeicons/core-free-icons"; -import { HugeiconsIcon } from "@hugeicons/react"; import { type ChangeEvent, type ComponentProps, @@ -311,7 +323,11 @@ const ThreadComposerDock: FC<{ />
- +

LLMs can make mistakes. Double-check responses. @@ -367,16 +383,13 @@ const ThreadWelcome: FC<{ return (

-
-
-
- Sloth mascot -

- Chat with your model +
+
+
+ Sloth mascot +

+ What’s on your mind today?

-

- Run GGUFs, safetensors, vision and audio models -

{!hideComposer && }
@@ -388,11 +401,12 @@ const ThreadWelcome: FC<{ const ComposerAnimated: FC<{ disabled?: boolean; threadId?: string | null; -}> = ({ disabled, threadId }) => { + menuSide?: "top" | "bottom"; +}> = ({ disabled, threadId, menuSide }) => { return ( -
+
- +
); @@ -425,12 +439,16 @@ const PendingAudioChip: FC = () => { const Composer: FC<{ disabled?: boolean; threadId?: string | null; -}> = ({ disabled, threadId }) => { + menuSide?: "top" | "bottom"; +}> = ({ disabled, threadId, menuSide }) => { const aui = useAui(); const { overlay, closeOverlay } = useGeneratedImageOverlay(); const setImageToolsEnabled = useChatRuntimeStore( (s) => s.setImageToolsEnabled, ); + const toolsEnabled = useChatRuntimeStore((s) => s.toolsEnabled); + const codeToolsEnabled = useChatRuntimeStore((s) => s.codeToolsEnabled); + const imageToolsEnabled = useChatRuntimeStore((s) => s.imageToolsEnabled); const activeThreadId = useChatRuntimeStore((s) => s.activeThreadId); const setPendingImageEditReference = useChatRuntimeStore( (s) => s.setPendingImageEditReference, @@ -452,6 +470,20 @@ const Composer: FC<{ const referenceThreadId = threadId ?? activeThreadId ?? null; const hasSendableContent = composerText.trim().length > 0 || hasAttachments || hasPendingAudio; + // Expanded (two-row) layout shows once there's any input or a tool is on. + // Uses the raw length, not the trimmed one, so newlines from shift+enter grow + // the box instead of leaving a collapsed row fighting the tall + // textarea. Send stays gated on hasSendableContent so blanks can't be sent. + const composerExpanded = + composerText.length > 0 || + hasAttachments || + hasPendingAudio || + toolsEnabled || + codeToolsEnabled || + imageToolsEnabled; + // Docked composer opens upward; the centered welcome composer opens downward + // by default and only flips up via collision detection when it would not fit. + const effectiveMenuSide = menuSide ?? "bottom"; const shouldBlockSend = useCallback( () => !hasSendableContent || isComposingRef.current || hasPendingAttachments, @@ -525,30 +557,46 @@ const Composer: FC<{ - - +
+
+ + {composerExpanded ? ( + <> + + + + + ) : null} +
+ + +
); @@ -561,11 +609,11 @@ const Composer: FC<{ {isTauri ? ( // Phase 1 native model drops own Tauri local-path drops. Restore browser // attachment drops in Tauri when Phase 1d adds attachment-token bridging. -
+
{composerContent}
) : ( - + {composerContent} )} @@ -697,7 +745,8 @@ function useImeComposerInputHandlers() { }; } -const ComposerAudioUpload: FC = () => { +// Audio upload row, only for audio-input models. +const ComposerAudioMenuItem: FC = () => { const audioInputRef = useRef(null); const setPendingAudio = useChatRuntimeStore((s) => s.setPendingAudio); const activeModel = useChatRuntimeStore((s) => { @@ -739,22 +788,65 @@ const ComposerAudioUpload: FC = () => { e.target.value = ""; }} /> - audioInputRef.current?.click()} - aria-label="Upload audio" - > - - + audioInputRef.current?.click()}> + + Upload audio + ); }; -const ReasoningToggle: FC = () => { +// Phosphor microphone. Inlined to avoid a new icon dependency. +const MicIcon: FC<{ className?: string }> = ({ className }) => ( + + + +); + +// HugeIcons arrow-down-01 (stroke-standard): straight-line chevron. +const ArrowDownStandardIcon: FC<{ className?: string }> = ({ className }) => ( + + + +); + +// svgrepo.com lightbulb (filled, with base). +const BulbIcon: FC<{ className?: string }> = ({ className }) => ( + + + +); + +// Same bulb in every state; greyed by the pill's muted color when off. +const ThinkIcon: FC = () => ; + +const ReasoningToggle: FC<{ side?: "top" | "bottom" }> = ({ + side = "bottom", +}) => { const modelLoaded = useChatRuntimeStore( (s) => !!s.params.checkpoint && !s.modelLoading, ); @@ -788,6 +880,11 @@ const ReasoningToggle: FC = () => { const isKimiExternal = selectedExternalProvider?.providerType === "kimi"; const toolsEnabled = useChatRuntimeStore((s) => s.toolsEnabled); const setToolsEnabled = useChatRuntimeStore((s) => s.setToolsEnabled); + const supportsPreserveThinking = useChatRuntimeStore( + (s) => s.supportsPreserveThinking, + ); + const preserveThinking = useChatRuntimeStore((s) => s.preserveThinking); + const setPreserveThinking = useChatRuntimeStore((s) => s.setPreserveThinking); const effectiveExternalModelId = selectedExternalProvider?.providerType === "openrouter" && externalSelection?.modelId === "openrouter/free" && @@ -802,7 +899,6 @@ const ReasoningToggle: FC = () => { { isReasoningProvider: selectedExternalProvider?.isReasoningModel === true, - baseUrl: selectedExternalProvider?.baseUrl ?? null, }, ) : null; @@ -837,71 +933,143 @@ const ReasoningToggle: FC = () => { }; const effortLabel = formatEffortLabel(reasoningEffort); - if (effectiveReasoningStyle === "reasoning_effort") { + // Only rendered for models that can reason. + if (!effectiveSupportsReasoning) { + return null; + } + + const isEffort = effectiveReasoningStyle === "reasoning_effort"; + // Dropdown when there are effort levels or preserve-thinking; else a toggle. + const useDropdown = isEffort || supportsPreserveThinking; + const activeLook = isEffort + ? reasoningLockedOn || (effectiveReasoningVisualEnabled && !disabled) + : reasoningLockedOn || (effectiveReasoningEnabled && !disabled); + + if (useDropdown) { return ( - - {effectiveSupportsReasoningOff && ( - { - setReasoningEnabled(false); - applyQwenThinkingParams(false); - }} - > - None - {!effectiveReasoningVisualEnabled ? " \u2713" : ""} - - )} - {effectiveReasoningEffortLevels - .filter((level) => level !== "none") - .map((level) => ( + + {isEffort ? ( + <> + {effectiveSupportsReasoningOff && ( + { + setReasoningEnabled(false); + applyQwenThinkingParams(false); + // Preserve thinking needs thinking on, so turn it off too. + setPreserveThinking(false); + }} + > + + None + + )} + {effectiveReasoningEffortLevels + .filter((level) => level !== "none") + .map((level) => ( + { + setReasoningEffort(level); + setReasoningEnabled(true); + applyQwenThinkingParams(true); + // Kimi's $web_search builtin forbids thinking, so + // enabling thinking flips the Search pill off. + if (isKimiExternal && toolsEnabled) { + setToolsEnabled(false); + } + }} + > + + {formatEffortLabel(level)} + + ))} + + ) : ( + effectiveSupportsReasoningOff && + !reasoningLockedOn && ( { - setReasoningEffort(level); - setReasoningEnabled(true); - applyQwenThinkingParams(true); - // Kimi's $web_search builtin forbids thinking, so - // enabling thinking flips the Search pill off. - if (isKimiExternal && toolsEnabled) { + const next = !reasoningEnabled; + setReasoningEnabled(next); + applyQwenThinkingParams(next); + // Preserve thinking cannot run without thinking. + if (!next) setPreserveThinking(false); + if (isKimiExternal && next && toolsEnabled) { setToolsEnabled(false); } }} > - {formatEffortLabel(level)} - {effectiveReasoningVisualEnabled && reasoningEffort === level - ? " \u2713" - : ""} + + Thinking - ))} + ) + )} + {supportsPreserveThinking && ( + { + e.preventDefault(); + const next = !preserveThinking; + setPreserveThinking(next); + // Preserve thinking requires thinking on. + if (next) { + setReasoningEnabled(true); + applyQwenThinkingParams(true); + } + }} + > + + Preserve thinking + + )} ); @@ -922,18 +1090,13 @@ const ReasoningToggle: FC = () => { const next = !reasoningEnabled; setReasoningEnabled(next); applyQwenThinkingParams(next); - // Mutual exclusion with the Search pill on Kimi — see the - // dropdown branch above and shared-composer for the same rule. + // Mutually exclusive with Search on Kimi (see dropdown branch). if (isKimiExternal && next && toolsEnabled) { setToolsEnabled(false); } }} - className="composer-pill-btn" - data-active={ - reasoningLockedOn || (effectiveReasoningEnabled && !disabled) - ? "true" - : "false" - } + className="unsloth-thinking-pill" + data-active={activeLook ? "true" : "false"} aria-label={thinkToggleAriaLabel({ reasoningLockedOn, modelLoaded, @@ -941,50 +1104,8 @@ const ReasoningToggle: FC = () => { effectiveReasoningEnabled, })} > - {reasoningLockedOn || (effectiveReasoningEnabled && !disabled) ? ( - - ) : ( - - )} - Think - - ); -}; - -const PreserveThinkingToggle: FC = () => { - const modelLoaded = useChatRuntimeStore( - (s) => !!s.params.checkpoint && !s.modelLoading, - ); - const supportsPreserveThinking = useChatRuntimeStore( - (s) => s.supportsPreserveThinking, - ); - const preserveThinking = useChatRuntimeStore((s) => s.preserveThinking); - const setPreserveThinking = useChatRuntimeStore((s) => s.setPreserveThinking); - if (!supportsPreserveThinking) return null; - const disabled = !modelLoaded; - return ( - ); }; @@ -1073,7 +1194,11 @@ const CodeToolsToggle: FC = () => { codeToolsEnabled ? "Disable code execution" : "Enable code execution" } > - + Code ); @@ -1174,82 +1299,182 @@ const ToolStatusDisplay: FC = () => {
); }; +// Plus menu: attachment and workflow actions. Opens downward in the centered +// welcome composer; the docked composer passes side="top" to open upward. +const ComposerToolsMenu: FC<{ side?: "top" | "bottom" }> = ({ + side = "bottom", +}) => { + const navigate = useNavigate(); + const setSettingsPanelOpen = useChatRuntimeStore( + (s) => s.setSettingsPanelOpen, + ); + const toolsEnabled = useChatRuntimeStore((s) => s.toolsEnabled); + const setToolsEnabled = useChatRuntimeStore((s) => s.setToolsEnabled); -const ComposerAction: FC<{ + const startCompare = useCallback(() => { + const store = useChatRuntimeStore.getState(); + store.setActiveThreadId(null); + store.setContextUsage(null); + navigate({ to: "/chat", search: { compare: crypto.randomUUID() } }); + }, [navigate]); + + return ( + + + + + event.preventDefault()} + > + + + + Add photos & files + + + + + + Recent files + + + + + + Add from library + + + Recents + No recent files + + + + + setToolsEnabled(!toolsEnabled)} + > + + Web search + {toolsEnabled ? : null} + + setSettingsPanelOpen(true)}> + + MCP + + startCompare()}> + + Compare chat + + + + + Canvas + + + + + New canvas + + + + + + + + Projects + + + + + New project + + + + + + ); +}; + +const ComposerRightControls: FC<{ disabled?: boolean; shouldBlockSend?: () => boolean; -}> = ({ disabled, shouldBlockSend }) => { + menuSide?: "top" | "bottom"; +}> = ({ disabled, shouldBlockSend, menuSide }) => { return ( -
-
- - - - - - - -
-
- - - - - - - - - - - - - - - !thread.isRunning}> - - { - if (shouldBlockSend?.()) { - event.preventDefault(); - } - }} - className="aui-composer-send size-8 rounded-full" - aria-label="Send message" - > - - - - - thread.isRunning}> - - - - -
+
+ + + + + + + + + + + + + + + + !thread.isRunning}> + + { + if (shouldBlockSend?.()) { + event.preventDefault(); + } + }} + className="aui-composer-send size-9 rounded-full" + aria-label="Send message" + > + + + + + thread.isRunning}> + + + +
); }; diff --git a/studio/frontend/src/components/ui/sonner.tsx b/studio/frontend/src/components/ui/sonner.tsx index 5bd3078761..4713e58d6e 100644 --- a/studio/frontend/src/components/ui/sonner.tsx +++ b/studio/frontend/src/components/ui/sonner.tsx @@ -63,7 +63,8 @@ const Toaster = ({ ...props }: ToasterProps) => { { "--normal-bg": "var(--popover)", "--normal-text": "var(--popover-foreground)", - "--normal-border": "var(--border)", + // No border line; elevation comes from the composer's drop shadow. + "--normal-border": "transparent", "--border-radius": "var(--radius)", // Pin close button to the top-right corner inside the toast. // Overrides sonner's default left placement and outside-corner diff --git a/studio/frontend/src/features/chat/components/model-load-status.tsx b/studio/frontend/src/features/chat/components/model-load-status.tsx index 381f58fbbf..7c4609ef0e 100644 --- a/studio/frontend/src/features/chat/components/model-load-status.tsx +++ b/studio/frontend/src/features/chat/components/model-load-status.tsx @@ -88,7 +88,7 @@ export function ModelLoadDescription({ size="xs" variant="ghost" aria-label="Stop model loading" - className="h-auto self-stretch shrink-0 !rounded-none !border-0 bg-transparent px-1 text-[10px] text-muted-foreground hover:bg-transparent hover:text-destructive focus-visible:text-destructive" + className="h-auto self-stretch shrink-0 !rounded-none !border-0 bg-transparent px-1 text-[10px] text-muted-foreground hover:!bg-transparent dark:hover:!bg-transparent hover:text-destructive focus-visible:text-destructive" onClick={onStop} > Cancel diff --git a/studio/frontend/src/features/chat/shared-composer.tsx b/studio/frontend/src/features/chat/shared-composer.tsx index 70f4311957..e7dbe94d95 100644 --- a/studio/frontend/src/features/chat/shared-composer.tsx +++ b/studio/frontend/src/features/chat/shared-composer.tsx @@ -23,12 +23,10 @@ import { getImageInputUnavailableReason } from "./utils/image-input-support"; import { useAui } from "@assistant-ui/react"; import { ArrowUpIcon, + CheckIcon, DownloadIcon, GlobeIcon, HeadphonesIcon, - LightbulbIcon, - LightbulbOffIcon, - MicIcon, PlusIcon, SquareIcon, XIcon, @@ -51,6 +49,7 @@ import { } from "./provider-capabilities"; import { type CompositionEvent, + type FC, type KeyboardEvent, type MutableRefObject, type ReactElement, @@ -83,6 +82,49 @@ export interface CompareHandle { const IMAGE_ACCEPT = "image/jpeg,image/png,image/webp,image/gif"; const MAX_IMAGE_SIZE = 20 * 1024 * 1024; +// Inlined to avoid a new icon dependency. Kept in sync with the main composer. +const ArrowDownStandardIcon: FC<{ className?: string }> = ({ className }) => ( + + + +); + +const MicIcon: FC<{ className?: string }> = ({ className }) => ( + + + +); + +const BulbIcon: FC<{ className?: string }> = ({ className }) => ( + + + +); + function isNativeComposing(event: Event) { return "isComposing" in event && (event as InputEvent).isComposing === true; } @@ -428,6 +470,10 @@ export function SharedComposer({ const reasoningDisabled = !modelLoaded || !effectiveSupportsReasoning; const showReasoningControl = effectiveSupportsReasoning || effectiveReasoningAlwaysOn; + const isEffort = effectiveReasoningStyle === "reasoning_effort"; + const thinkingActiveLook = isEffort + ? reasoningLockedOn || (effectiveReasoningVisualEnabled && !reasoningDisabled) + : reasoningLockedOn || (effectiveReasoningEnabled && !reasoningDisabled); // Two-pill gating: Search pill lights up when the runtime has either // a local tool runtime (supportsTools, gives us our Code/python + local // web_search) OR a server-side web_search the provider runs for us @@ -952,158 +998,171 @@ export function SharedComposer({ )} {showReasoningControl ? ( - effectiveReasoningStyle === "reasoning_effort" ? ( - - - + + - {effectiveReasoningVisualEnabled ? ( - + {isEffort ? ( + <> + {effectiveSupportsReasoningOff && ( + { + setReasoningEnabled(false); + applyQwenThinkingParams(false); + }} + > + + {formatReasoningDisabledLabel( + effectiveSupportsReasoningOff, + isExternalOpenAIReasoning, + checkpoint, + )} + + )} + {effectiveReasoningEffortLevels + .filter((level) => level !== "none") + .map((level) => ( + { + setReasoningEffort(level); + setReasoningEnabled(true); + applyQwenThinkingParams(true); + // Mutual exclusion: turning thinking on for a + // Kimi model forces the web_search builtin off. + if (isKimiExternal && toolsEnabled) { + setToolsEnabled(false, { persist: false }); + } + }} + > + + {formatReasoningEffortLabel( + level, + externalSelection?.modelId, + )} + + ))} + ) : ( - + effectiveSupportsReasoningOff && + !reasoningLockedOn && ( + { + const next = !reasoningEnabled; + setReasoningEnabled(next); + applyQwenThinkingParams(next); + if (isKimiExternal && next && toolsEnabled) { + setToolsEnabled(false, { persist: false }); + } + }} + > + + Thinking + + ) )} - - Think:{" "} - {effectiveReasoningVisualEnabled - ? formatReasoningEffortLabel( - reasoningEffort, - externalSelection?.modelId, - ) - : formatReasoningDisabledLabel( - effectiveSupportsReasoningOff, - isExternalOpenAIReasoning, - checkpoint, + {supportsPreserveThinking && ( + { + e.preventDefault(); + setPreserveThinking(!preserveThinking); + }} + > + - - - - {effectiveSupportsReasoningOff && ( - { - setReasoningEnabled(false); - applyQwenThinkingParams(false); - }} - > - {formatReasoningDisabledLabel( - effectiveSupportsReasoningOff, - isExternalOpenAIReasoning, - checkpoint, - )} - {!effectiveReasoningVisualEnabled ? " \u2713" : ""} - - )} - {effectiveReasoningEffortLevels - .filter((level) => level !== "none") - .map((level) => ( - { - setReasoningEffort(level); - setReasoningEnabled(true); - applyQwenThinkingParams(true); - // Mutual exclusion: turning thinking on for a - // Kimi model forces the web_search builtin off. - if (isKimiExternal && toolsEnabled) { - setToolsEnabled(false, { persist: false }); - } - }} - > - {formatReasoningEffortLabel(level, externalSelection?.modelId)} - {effectiveReasoningVisualEnabled && reasoningEffort === level ? " \u2713" : ""} - - ))} - - - ) : ( - + onClick={() => { + if (reasoningLockedOn) return; + const next = !reasoningEnabled; + setReasoningEnabled(next); + applyQwenThinkingParams(next); + // Mutual exclusion: Kimi's $web_search builtin + // requires thinking off, so turning thinking on flips + // the Search pill off (and vice versa). + if (isKimiExternal && next && toolsEnabled) { + setToolsEnabled(false, { persist: false }); + } + }} + className="unsloth-thinking-pill" + data-active={thinkingActiveLook ? "true" : "false"} + aria-label={thinkToggleAriaLabel({ + reasoningLockedOn, + modelLoaded, + reasoningDisabled, + effectiveReasoningEnabled, + })} + > + + {thinkingActiveLook ? Thinking : null} + ) ) : null} - {supportsPreserveThinking && ( - - )} + {labelHref ? ( + + ) : ( + + )} {open &&
{children}
}
); @@ -1345,7 +1376,10 @@ export function ChatSettingsPanel({ ) : null} {!isExternalModel ? ( - + ) : null} diff --git a/studio/frontend/src/index.css b/studio/frontend/src/index.css index 84a34bcf49..ba79fed4f5 100644 --- a/studio/frontend/src/index.css +++ b/studio/frontend/src/index.css @@ -795,7 +795,7 @@ } .composer-pill-btn { - @apply flex items-center gap-1.5 rounded-full px-1.5 py-1.5 text-[14px] font-medium text-muted-foreground/70 transition-colors hover:bg-primary/10 dark:hover:bg-white/[0.08] disabled:cursor-not-allowed disabled:opacity-40; + @apply flex cursor-pointer items-center gap-1.5 rounded-full px-1.5 py-1.5 text-[14px] font-medium text-muted-foreground/70 transition-colors hover:bg-primary/10 dark:hover:bg-white/[0.08] disabled:cursor-not-allowed disabled:opacity-40; } .composer-pill-btn[data-active="true"] { @@ -901,7 +901,7 @@ /* Right-side Thinking pill (toggle or dropdown). */ .unsloth-thinking-pill { - @apply inline-flex shrink-0 items-center gap-1 rounded-full px-2.5 py-1.5 text-[14px] font-medium text-muted-foreground transition-colors hover:bg-muted-foreground/10 disabled:cursor-not-allowed disabled:opacity-40; + @apply inline-flex shrink-0 cursor-pointer items-center gap-1 rounded-full px-2.5 py-1.5 text-[14px] font-medium text-muted-foreground transition-colors hover:bg-muted-foreground/10 disabled:cursor-not-allowed disabled:opacity-40; } .unsloth-thinking-pill[data-active="true"] { From 7d53d49f2287827391a546f98f2056981ec64ab5 Mon Sep 17 00:00:00 2001 From: shimmyshimmer <107991372+shimmyshimmer@users.noreply.github.com> Date: Sat, 30 May 2026 07:28:08 -0700 Subject: [PATCH 05/17] Studio: refine chat composer and add compare-mode parity - Composer expands to two rows only once the input wraps to a second line, not on the first keystroke. Re-measure the autosize textarea on the width swap so expanding no longer leaves a stray blank row. - Light-mode composer shadow now matches Gemini's soft elevation. - Plus menu: replace Canvas with a More submenu (Canvas, Compare chat, RAG) and add Code above MCP. Active Web search/Code items use medium weight. - Compare mode: the plus side menu, Search/Code toggles, and a Compare exit pill now match single chat, with the thinking control on the right. - Projects menu entries link to their tracking PR (#5725). - Add cursor-pointer to the composer plus button. --- .../src/components/assistant-ui/thread.tsx | 109 +++++- .../frontend/src/features/chat/chat-page.tsx | 25 +- .../src/features/chat/shared-composer.tsx | 359 ++++++++++++------ studio/frontend/src/index.css | 24 +- 4 files changed, 381 insertions(+), 136 deletions(-) diff --git a/studio/frontend/src/components/assistant-ui/thread.tsx b/studio/frontend/src/components/assistant-ui/thread.tsx index b87d5b05b0..ddde7990a2 100644 --- a/studio/frontend/src/components/assistant-ui/thread.tsx +++ b/studio/frontend/src/components/assistant-ui/thread.tsx @@ -56,6 +56,7 @@ import { AUDIO_ACCEPT, MAX_AUDIO_SIZE, fileToBase64 } from "@/lib/audio-utils"; import { copyToClipboard } from "@/lib/copy-to-clipboard"; import { toast } from "@/lib/toast"; import { cn } from "@/lib/utils"; +import { openLink } from "@/lib/open-link"; import { ActionBarMorePrimitive, ActionBarPrimitive, @@ -74,6 +75,7 @@ import { AttachmentIcon, CodeIcon, Copy01Icon, + DatabaseIcon, Delete02Icon, Edit03Icon, File02Icon, @@ -456,6 +458,26 @@ const Composer: FC<{ const { inputProps, isComposing, isComposingRef } = useImeComposerInputHandlers(); const composerText = useAuiState(({ composer }) => composer.text); + // Expand only once the input wraps to a second line, not on first keystroke. + // Latch until cleared so it can't flip-flop at the wrap boundary. + const inputRef = useRef(null); + const [isMultiline, setIsMultiline] = useState(false); + useEffect(() => { + if (composerText.length === 0) { + setIsMultiline(false); + return; + } + const el = inputRef.current; + if (!el) { + return; + } + const cs = getComputedStyle(el); + const lineHeight = Number.parseFloat(cs.lineHeight) || 24; + const padTop = Number.parseFloat(cs.paddingTop) || 0; + const padBottom = Number.parseFloat(cs.paddingBottom) || 0; + const contentHeight = el.scrollHeight - padTop - padBottom; + setIsMultiline((prev) => prev || contentHeight > lineHeight * 1.5); + }, [composerText]); const hasAttachments = useAuiState( ({ composer }) => composer.attachments.length > 0, ); @@ -470,17 +492,52 @@ const Composer: FC<{ const referenceThreadId = threadId ?? activeThreadId ?? null; const hasSendableContent = composerText.trim().length > 0 || hasAttachments || hasPendingAudio; - // Expanded (two-row) layout shows once there's any input or a tool is on. - // Uses the raw length, not the trimmed one, so newlines from shift+enter grow - // the box instead of leaving a collapsed row fighting the tall - // textarea. Send stays gated on hasSendableContent so blanks can't be sent. + // Two-row layout shows once the input wraps to a second line or a tool is on. const composerExpanded = - composerText.length > 0 || + isMultiline || hasAttachments || hasPendingAudio || toolsEnabled || codeToolsEnabled || imageToolsEnabled; + // react-textarea-autosize re-measures only on value change or window resize, + // not on the width swap from expanding, so it keeps the taller height and + // leaves a stray blank row. Nudge a resize whenever the input width changes. + useEffect(() => { + const el = inputRef.current; + if (!el || typeof ResizeObserver === "undefined") { + return; + } + let lastWidth = -1; + const pending: Array> = []; + const observer = new ResizeObserver((entries) => { + const width = Math.round(entries[0]?.contentRect.width ?? 0); + // Width changes only; reacting to autosize's height change would loop. + if (width === lastWidth) { + return; + } + lastWidth = width; + // Re-measure after layout settles. An immediate dispatch races autosize's + // own measurement (stale pre-expand width); 0ms + 64ms wins it, no flash. + while (pending.length) { + clearTimeout(pending.pop()); + } + for (const delay of [0, 64]) { + pending.push( + setTimeout(() => { + window.dispatchEvent(new Event("resize")); + }, delay), + ); + } + }); + observer.observe(el); + return () => { + while (pending.length) { + clearTimeout(pending.pop()); + } + observer.disconnect(); + }; + }, []); // Docked composer opens upward; the centered welcome composer opens downward // by default and only flips up via collision detection when it would not fit. const effectiveMenuSide = menuSide ?? "bottom"; @@ -575,6 +632,7 @@ const Composer: FC<{ placeholder={ overlay ? "Type your edits for your image" : "Ask anything" } + ref={inputRef} className="aui-composer-input unsloth-composer-input" minRows={1} maxRows={12} @@ -1302,6 +1360,9 @@ const ToolStatusDisplay: FC = () => {
); }; +// Projects is still in development; its menu entries link to the tracking PR. +const PROJECTS_PR_URL = "https://github.com/unslothai/unsloth/pull/5725"; + // Plus menu: attachment and workflow actions. Opens downward in the centered // welcome composer; the docked composer passes side="top" to open upward. const ComposerToolsMenu: FC<{ side?: "top" | "bottom" }> = ({ @@ -1313,6 +1374,8 @@ const ComposerToolsMenu: FC<{ side?: "top" | "bottom" }> = ({ ); const toolsEnabled = useChatRuntimeStore((s) => s.toolsEnabled); const setToolsEnabled = useChatRuntimeStore((s) => s.setToolsEnabled); + const codeToolsEnabled = useChatRuntimeStore((s) => s.codeToolsEnabled); + const setCodeToolsEnabled = useChatRuntimeStore((s) => s.setCodeToolsEnabled); const startCompare = useCallback(() => { const store = useChatRuntimeStore.getState(); @@ -1372,30 +1435,42 @@ const ComposerToolsMenu: FC<{ side?: "top" | "bottom" }> = ({ setToolsEnabled(!toolsEnabled)} > Web search {toolsEnabled ? : null} + setCodeToolsEnabled(!codeToolsEnabled)} + > + + Code + {codeToolsEnabled ? : null} + setSettingsPanelOpen(true)}> MCP - startCompare()}> - - Compare chat - - - Canvas + + More - - New canvas + + Canvas + + startCompare()}> + + Compare chat + + + + RAG @@ -1406,10 +1481,14 @@ const ComposerToolsMenu: FC<{ side?: "top" | "bottom" }> = ({ Projects - + openLink(PROJECTS_PR_URL)}> New project + Recents + openLink(PROJECTS_PR_URL)}> + No recent projects + diff --git a/studio/frontend/src/features/chat/chat-page.tsx b/studio/frontend/src/features/chat/chat-page.tsx index c4a5f34273..d78297824e 100644 --- a/studio/frontend/src/features/chat/chat-page.tsx +++ b/studio/frontend/src/features/chat/chat-page.tsx @@ -207,6 +207,7 @@ const CompareContent = memo(function CompareContent({ onFoldersChange, onModelsChange, deleteDisabled, + onExitCompare, }: { pairId: string; models: ModelOption[]; @@ -214,11 +215,12 @@ const CompareContent = memo(function CompareContent({ onFoldersChange?: () => void; onModelsChange?: (deletedModel?: DeletedModelRef) => void; deleteDisabled?: boolean; + onExitCompare?: () => void; }): ReactElement { const isLoraCompare = useIsLoraCompare(); return isLoraCompare ? ( - + ) : ( ); }); @@ -324,7 +327,8 @@ function CompareShell({ /** Fast path: same model, adapter on/off, simultaneous generation. */ const LoraCompareContent = memo(function LoraCompareContent({ pairId, -}: { pairId: string }): ReactElement { + onExitCompare, +}: { pairId: string; onExitCompare?: () => void }): ReactElement { const handlesRef = useRef>({}); const [baseThreadId, setBaseThreadId] = useState(); const [loraThreadId, setLoraThreadId] = useState(); @@ -348,7 +352,12 @@ const LoraCompareContent = memo(function LoraCompareContent({ return ( } + composer={ + + } > <> void; onModelsChange?: (deletedModel?: DeletedModelRef) => void; deleteDisabled?: boolean; + onExitCompare?: () => void; }): ReactElement { const handlesRef = useRef>({}); const [model1ThreadId, setModel1ThreadId] = useState(); @@ -508,6 +519,7 @@ const GeneralCompareContent = memo(function GeneralCompareContent({ handlesRef={handlesRef} model1={model1} model2={model2} + onExitCompare={onExitCompare} /> } > @@ -1193,7 +1205,11 @@ export function ChatPage(): ReactElement { const exitCompare = useCallback(() => { const saved = viewBeforeCompareRef.current; - if (!saved) return; + // No saved view (compare opened by direct URL); fall back to a fresh chat. + if (!saved) { + navigate({ to: "/chat" }); + return; + } viewBeforeCompareRef.current = null; navigate({ to: "/chat", search: saved }); // Restore usage from the last assistant message, but only if it @@ -1606,6 +1622,7 @@ export function ChatPage(): ReactElement { onFoldersChange={refreshLocalModels} onModelsChange={refreshModelLists} deleteDisabled={modelOperationInProgress} + onExitCompare={exitCompare} /> )}
diff --git a/studio/frontend/src/features/chat/shared-composer.tsx b/studio/frontend/src/features/chat/shared-composer.tsx index 08a993e039..c6b36c6f9e 100644 --- a/studio/frontend/src/features/chat/shared-composer.tsx +++ b/studio/frontend/src/features/chat/shared-composer.tsx @@ -9,10 +9,16 @@ import { } from "@/components/assistant-ui/think-aria-label"; import { Button } from "@/components/ui/button"; import { cn } from "@/lib/utils"; +import { openLink } from "@/lib/open-link"; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, + DropdownMenuLabel, + DropdownMenuSeparator, + DropdownMenuSub, + DropdownMenuSubContent, + DropdownMenuSubTrigger, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import { applyQwenThinkingParams } from "@/features/chat/utils/qwen-params"; @@ -24,14 +30,28 @@ import { useAui } from "@assistant-ui/react"; import { ArrowUpIcon, CheckIcon, + Columns2Icon, DownloadIcon, + FolderPlusIcon, GlobeIcon, HeadphonesIcon, + LibraryIcon, + MoreHorizontalIcon, + PlugIcon, PlusIcon, SquareIcon, XIcon, } from "lucide-react"; -import { Image03Icon } from "@hugeicons/core-free-icons"; +import { + AttachmentIcon, + CodeIcon, + DatabaseIcon, + File02Icon, + Folder01Icon, + Image03Icon, + PencilRulerIcon, +} from "@hugeicons/core-free-icons"; +import { useNavigate } from "@tanstack/react-router"; import { HugeiconsIcon } from "@hugeicons/react"; import { toast } from "@/lib/toast"; import { loadModel, validateModel } from "./api/chat-api"; @@ -62,6 +82,9 @@ import { useState, } from "react"; +// Projects is still in development; its menu entries link to the tracking PR. +const PROJECTS_PR_URL = "https://github.com/unslothai/unsloth/pull/5725"; + export type CompareMessagePart = | { type: "text"; text: string } | { type: "image"; image: string } @@ -336,11 +359,26 @@ export function SharedComposer({ handlesRef, model1, model2, + onExitCompare, }: { handlesRef: CompareHandles; model1?: CompareModelSelection; model2?: CompareModelSelection; + onExitCompare?: () => void; }): ReactElement { + const navigate = useNavigate(); + const setSettingsPanelOpen = useChatRuntimeStore( + (s) => s.setSettingsPanelOpen, + ); + // Exit compare. Uses the parent's restore handler, or a fresh chat when + // compare was opened by direct URL. + const handleExitCompare = useCallback(() => { + if (onExitCompare) { + onExitCompare(); + return; + } + navigate({ to: "/chat" }); + }, [navigate, onExitCompare]); const [text, setText] = useState(""); const [running, setRunning] = useState(false); const [comparing, setComparing] = useState(false); @@ -957,48 +995,215 @@ export function SharedComposer({ e.target.value = ""; }} /> - { - // The picker accepts both image and audio. Don't gate the - // button on image-availability — addFiles still filters - // image files per-file when the loaded model can't take - // them, while audio attach always works. - fileInputRef.current?.click(); + { + addFiles(e.target.files); + e.target.value = ""; }} - aria-label="Add Attachment" - > - - - {activeModel?.hasAudioInput && ( - <> - { - addFiles(e.target.files); - e.target.value = ""; - }} - /> - audioInputRef.current?.click()} - aria-label="Upload audio" + /> + {/* Same + side menu as the single-chat composer (ComposerToolsMenu), + wired to the compare composer's own file/audio inputs and tools. */} + + + + + event.preventDefault()} + > + fileInputRef.current?.click()}> + + Add photos & files + + + + + Recent files + + + fileInputRef.current?.click()} + > + + Add from library + + Recents + + No recent files + + + + {activeModel?.hasAudioInput && ( + audioInputRef.current?.click()} + > + + Upload audio + + )} + + setToolsEnabled(!toolsEnabled)} + > + + Web search + {toolsEnabled ? : null} + + setCodeToolsEnabled(!codeToolsEnabled)} + > + + Code + {codeToolsEnabled ? : null} + + setSettingsPanelOpen(true)}> + + MCP + + + + + More + + + + + Canvas + + {/* Always active: this menu only renders in compare mode. + Ticked like Web search/Code; click toggles it off. */} + + + Compare chat + + + + + RAG + + + + + + + + Projects + + + openLink(PROJECTS_PR_URL)}> + + New project + + Recents + openLink(PROJECTS_PR_URL)}> + No recent projects + + + + + + + + {/* Active in compare mode; click to exit back to single chat. */} + + {showImagePill && ( + )} + {showWebFetchPill && ( + + )} +

+
{showReasoningControl ? ( isEffort || supportsPreserveThinking ? ( @@ -1018,7 +1223,7 @@ export function SharedComposer({ {thinkingActiveLook ? ( {isEffort - ? `Thinking \u00b7 ${formatReasoningEffortLabel( + ? `Thinking · ${formatReasoningEffortLabel( reasoningEffort, externalSelection?.modelId, )}` @@ -1175,78 +1380,6 @@ export function SharedComposer({ ) ) : null} - - - {showImagePill && ( - - )} - {showWebFetchPill && ( - - )} -
-
{dictationSupported && ( <> {!isDictating ? ( diff --git a/studio/frontend/src/index.css b/studio/frontend/src/index.css index ba79fed4f5..1e0639245e 100644 --- a/studio/frontend/src/index.css +++ b/studio/frontend/src/index.css @@ -820,12 +820,19 @@ @apply relative flex w-full flex-col rounded-[28px] bg-background dark:bg-card px-3 py-2.5 outline-none transition-shadow; font-family: var(--font-sans); background-clip: padding-box; - /* Composer elevation: one soft shadow (on-surface @ 16%). */ - box-shadow: 0 2px 8px -2px rgba(27, 27, 31, 0.16); + /* Light-mode elevation matches Gemini's search box (Lumi level-1): a soft, + diffuse ambient shadow rather than a tight drop shadow. */ + box-shadow: + 0 1px 2px 0 rgba(0, 0, 0, 0.04), + 0 4px 12px 0 rgba(0, 0, 0, 0.08), + 0 8px 24px 0 rgba(0, 0, 0, 0.06); } .unsloth-composer-surface:focus-within { - box-shadow: 0 2px 8px -2px rgba(27, 27, 31, 0.16); + box-shadow: + 0 1px 2px 0 rgba(0, 0, 0, 0.04), + 0 4px 12px 0 rgba(0, 0, 0, 0.08), + 0 8px 24px 0 rgba(0, 0, 0, 0.06); } .dark .unsloth-composer-surface { @@ -833,6 +840,15 @@ box-shadow: none; } + /* Keep the expand/collapse width swap instant. A transition on width (e.g. + the reduced-motion blanket rule) makes getComputedStyle().width lag a + frame, so autosize measures the stale width and leaves a stray blank row. */ + .unsloth-composer-line, + .unsloth-composer-line .unsloth-composer-input, + .unsloth-composer-left { + transition-property: none !important; + } + /* Composer row: one centered line when empty; two rows (input over controls) when filled, so the textarea never remounts. */ .unsloth-composer-line { @@ -882,7 +898,7 @@ } .unsloth-composer-plus { - @apply flex size-9 shrink-0 items-center justify-center rounded-full text-foreground transition-colors hover:bg-muted-foreground/15 disabled:cursor-not-allowed disabled:opacity-40; + @apply flex size-9 shrink-0 cursor-pointer items-center justify-center rounded-full text-foreground transition-colors hover:bg-muted-foreground/15 disabled:cursor-not-allowed disabled:opacity-40; } .unsloth-composer-plus[data-state="open"] { From 1b58287c075f0f9a1e6ecf565878b70607d26491 Mon Sep 17 00:00:00 2001 From: wasimysaid Date: Sat, 30 May 2026 20:21:21 +0200 Subject: [PATCH 06/17] style(studio): tune chat ui styles --- studio/frontend/src/index.css | 2095 +++++++++++++++++---------------- 1 file changed, 1110 insertions(+), 985 deletions(-) diff --git a/studio/frontend/src/index.css b/studio/frontend/src/index.css index 1e0639245e..bc957ad614 100644 --- a/studio/frontend/src/index.css +++ b/studio/frontend/src/index.css @@ -15,571 +15,624 @@ @custom-variant dark (&:is(.dark *)); @font-face { - font-family: "Hellix"; - src: url("/fonts/Hellix-Regular.woff") format("woff"); - font-weight: 400; - font-style: normal; - font-display: swap; + font-family: "Hellix"; + src: url("/fonts/Hellix-Regular.woff") format("woff"); + font-weight: 400; + font-style: normal; + font-display: swap; } @font-face { - font-family: "Hellix"; - src: url("/fonts/Hellix-Medium.woff") format("woff"); - font-weight: 500; - font-style: normal; - font-display: swap; + font-family: "Hellix"; + src: url("/fonts/Hellix-Medium.woff") format("woff"); + font-weight: 500; + font-style: normal; + font-display: swap; } @font-face { - font-family: "Hellix"; - src: url("/fonts/Hellix-SemiBold.woff2") format("woff2"), - url("/fonts/Hellix-SemiBold.woff") format("woff"); - font-weight: 600; - font-style: normal; - font-display: swap; + font-family: "Hellix"; + src: url("/fonts/Hellix-SemiBold.woff2") format("woff2"), + url("/fonts/Hellix-SemiBold.woff") format("woff"); + font-weight: 600; + font-style: normal; + font-display: swap; } @font-face { - font-family: "Fira Code"; - src: url("/fonts/FiraCode-VariableFont_wght.ttf") format("truetype-variations"); - font-weight: 300 700; - font-style: normal; - font-display: swap; + font-family: "Fira Code"; + src: url("/fonts/FiraCode-VariableFont_wght.ttf") + format("truetype-variations"); + font-weight: 300 700; + font-style: normal; + font-display: swap; } :root { - /* Animation timing */ - --duration-micro: 100ms; - --duration-fast: 150ms; - --duration-normal: 200ms; + /* Animation timing */ + --duration-micro: 100ms; + --duration-fast: 150ms; + --duration-normal: 200ms; - /* Easing curves (Emil Kowalski) */ - --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1); - --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1); + /* Easing curves (Emil Kowalski) */ + --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1); + --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1); - --background: oklch(1 0 0); - --foreground: oklch(0.2686 0 0); - --card: oklch(1 0 0); - --card-foreground: oklch(0.1281 0.0179 169.2764); - --popover: oklch(1 0 0); - --popover-foreground: oklch(0.1281 0.0179 169.2764); - --primary: #17b88b; - --primary-foreground: oklch(1 0 0); - --secondary: oklch(0.9596 0.0275 167.8295); - --secondary-foreground: oklch(0.2868 0.0649 159.9823); - --muted: oklch(0.9702 0 0); - --muted-foreground: oklch(0.5486 0 0); - --accent: oklch(0.9596 0.0275 167.8295); - --accent-foreground: oklch(0.2868 0.0649 159.9823); - --destructive: oklch(0.6368 0.2078 25.3313); - --border: oklch(0.9208 0.0101 164.8536); - --input: oklch(0.9208 0.0101 164.8536); - --ring: #17b88b; - --chart-1: #17b88b; - --chart-2: oklch(0.694 0.1395 136.6059); - --chart-3: oklch(0.7014 0.1193 197.5897); - --chart-4: oklch(0.6926 0.1112 346.5775); - --chart-5: oklch(0.7497 0.1003 85.0057); - --radius: 1.1rem; - --sidebar: #f9faf9; - --sidebar-foreground: oklch(0.1281 0.0179 169.2764); - --sidebar-primary: #17b88b; - --sidebar-primary-foreground: oklch(1 0 0); - --sidebar-accent: oklch(0.96 0.0279 166.55); - --sidebar-accent-foreground: oklch(0.2868 0.0649 159.9823); - --sidebar-border: oklch(0.945 0.0101 164.8536); - --sidebar-ring: #17b88b; - --destructive-foreground: oklch(1 0 0); - --font-sans: "Inter Variable", ui-sans-serif, sans-serif, system-ui; - --font-heading: "Hellix", "Space Grotesk Variable", var(--font-sans); - --font-serif: Source Serif 4, serif; - --font-mono: JetBrains Mono, monospace; - --shadow-color: hsl(0 0% 0%); - --shadow-opacity: 0; - --shadow-blur: 0px; - --shadow-spread: 0px; - --shadow-offset-x: 0px; - --shadow-offset-y: 0px; - --letter-spacing: 0em; - --spacing: 0.25rem; - /*--shadow-2xs: 0px 0px 0px 0px hsl(0 0% 0% / 0);*/ - /*--shadow-xs: 0px 0px 0px 0px hsl(0 0% 0% / 0);*/ - /*--shadow-sm:*/ - /* 0px 0px 0px 0px hsl(0 0% 0% / 0),*/ - /* 0px 1px 2px 0px hsl(0 0% 0% / 0);*/ - /*--shadow:*/ - /* 0px 0px 0px 0px hsl(0 0% 0% / 0),*/ - /* 0px 1px 2px 0px hsl(0 0% 0% / 0);*/ - /*--shadow-md:*/ - /* 0px 0px 0px 0px hsl(0 0% 0% / 0),*/ - /* 0px 2px 4px 0px hsl(0 0% 0% / 0);*/ - /*--shadow-lg:*/ - /* 0px 0px 0px 0px hsl(0 0% 0% / 0),*/ - /* 0px 4px 6px 0px hsl(0 0% 0% / 0);*/ - /*--shadow-xl:*/ - /* 0px 0px 0px 0px hsl(0 0% 0% / 0),*/ - /* 0px 8px 10px 0px hsl(0 0% 0% / 0);*/ - /*--shadow-2xl: 0px 0px 0px 0px hsl(0 0% 0% / 0);*/ - --tracking-normal: -0.01em; + --background: oklch(1 0 0); + --foreground: oklch(0.2686 0 0); + --card: oklch(1 0 0); + --card-foreground: oklch(0.1281 0.0179 169.2764); + --popover: oklch(1 0 0); + --popover-foreground: oklch(0.1281 0.0179 169.2764); + --primary: #17b88b; + --primary-foreground: oklch(1 0 0); + --secondary: oklch(0.9596 0.0275 167.8295); + --secondary-foreground: oklch(0.2868 0.0649 159.9823); + --muted: oklch(0.9702 0 0); + --muted-foreground: oklch(0.5486 0 0); + --accent: oklch(0.9596 0.0275 167.8295); + --accent-foreground: oklch(0.2868 0.0649 159.9823); + --destructive: oklch(0.6368 0.2078 25.3313); + --border: oklch(0.9208 0.0101 164.8536); + --input: oklch(0.9208 0.0101 164.8536); + --ring: #17b88b; + --chart-1: #17b88b; + --chart-2: oklch(0.694 0.1395 136.6059); + --chart-3: oklch(0.7014 0.1193 197.5897); + --chart-4: oklch(0.6926 0.1112 346.5775); + --chart-5: oklch(0.7497 0.1003 85.0057); + --radius: 1.1rem; + --sidebar: #f9faf9; + --sidebar-foreground: oklch(0.1281 0.0179 169.2764); + --sidebar-primary: #17b88b; + --sidebar-primary-foreground: oklch(1 0 0); + --sidebar-accent: oklch(0.96 0.0279 166.55); + --sidebar-accent-foreground: oklch(0.2868 0.0649 159.9823); + --sidebar-border: oklch(0.945 0.0101 164.8536); + --sidebar-ring: #17b88b; + --destructive-foreground: oklch(1 0 0); + --font-sans: "Inter Variable", ui-sans-serif, sans-serif, system-ui; + --font-heading: "Hellix", "Space Grotesk Variable", var(--font-sans); + --font-serif: Source Serif 4, serif; + --font-mono: JetBrains Mono, monospace; + --shadow-color: hsl(0 0% 0%); + --shadow-opacity: 0; + --shadow-blur: 0px; + --shadow-spread: 0px; + --shadow-offset-x: 0px; + --shadow-offset-y: 0px; + --letter-spacing: 0em; + --spacing: 0.25rem; + /*--shadow-2xs: 0px 0px 0px 0px hsl(0 0% 0% / 0);*/ + /*--shadow-xs: 0px 0px 0px 0px hsl(0 0% 0% / 0);*/ + /*--shadow-sm:*/ + /* 0px 0px 0px 0px hsl(0 0% 0% / 0),*/ + /* 0px 1px 2px 0px hsl(0 0% 0% / 0);*/ + /*--shadow:*/ + /* 0px 0px 0px 0px hsl(0 0% 0% / 0),*/ + /* 0px 1px 2px 0px hsl(0 0% 0% / 0);*/ + /*--shadow-md:*/ + /* 0px 0px 0px 0px hsl(0 0% 0% / 0),*/ + /* 0px 2px 4px 0px hsl(0 0% 0% / 0);*/ + /*--shadow-lg:*/ + /* 0px 0px 0px 0px hsl(0 0% 0% / 0),*/ + /* 0px 4px 6px 0px hsl(0 0% 0% / 0);*/ + /*--shadow-xl:*/ + /* 0px 0px 0px 0px hsl(0 0% 0% / 0),*/ + /* 0px 8px 10px 0px hsl(0 0% 0% / 0);*/ + /*--shadow-2xl: 0px 0px 0px 0px hsl(0 0% 0% / 0);*/ + --tracking-normal: -0.01em; - /* Hex (not OKLCH) so the rendered surface matches the design mockup pixel-for-pixel. */ - --nav-fg: #383835; - --nav-fg-muted: #858279; - --nav-surface-hover: #f0f0f0; - --nav-icon-idle: #8f8f8f; - --nav-beta-border: #e0ded6; - --panel-surface-hover: #ebebeb; - /* Right-side chat-parameters panel: matches the chat content + /* Hex (not OKLCH) so the rendered surface matches the design mockup pixel-for-pixel. */ + --nav-fg: #383835; + --nav-fg-muted: #858279; + --nav-surface-hover: #f0f0f0; + --nav-icon-idle: #8f8f8f; + --nav-beta-border: #e0ded6; + --panel-surface-hover: #ebebeb; + /* Right-side chat-parameters panel: matches the chat content surface in both themes — distinction from the left sidebar (#f9faf9) is handled by the left border alone. Tracks `--background` so any future tweaks to the chat surface flow through automatically. */ - --panel-surface: var(--background); - --panel-surface-fg: var(--foreground); - --panel-input-surface: #f5f5f5; - --panel-input-surface-hover: #efefef; - /* Muted gray with a one-step warmer-blue last channel (#779 vs flat #777) + --panel-surface: var(--background); + --panel-surface-fg: var(--foreground); + --panel-input-surface: #f5f5f5; + --panel-input-surface-hover: #efefef; + /* Muted gray with a one-step warmer-blue last channel (#779 vs flat #777) so the tone has a faint hue rather than pure neutral — keeps text and sliders quiet but not lifeless. */ - --panel-surface-fg-muted: #777779; - /* Slider track-fill / thumb / hover halo. Decoupled from + --panel-surface-fg-muted: #777779; + /* Slider track-fill / thumb / hover halo. Decoupled from --panel-surface-fg-muted so the slider can be tuned independently from muted text. Light mode: lighter than the muted-text gray for a softer feel. Dark mode (further down) keeps parity with the muted-text token. */ - --panel-slider-fg: #9a9a9c; - /* Chat-message action icons (assistant action bar, branch picker + --panel-slider-fg: #9a9a9c; + /* Chat-message action icons (assistant action bar, branch picker chevrons + numbers, message-timing token counter, code-block copy/download, user action bar, delete button). One token drives all of them so the row reads as a single coherent control strip. Mid-dark gray on the light surface — visible enough to read as active controls, not so dark that they compete with message text. */ - --chat-icon-fg: #555555; - --chat-icon-fg-hover: var(--foreground); - --chat-icon-bg-hover: #ededec; + --chat-icon-fg: #555555; + --chat-icon-fg-hover: var(--foreground); + --chat-icon-bg-hover: #ededec; - /* Standard interactive-icon size for nav, menus, action bars, and + /* Standard interactive-icon size for nav, menus, action bars, and in-message code-block actions. Sized one step above body text so icons read as minimally larger than adjacent labels (~14px text). Theme-independent — declared once in :root. */ - --icon-size: 18px; - /* Inset of a centered .size-icon glyph within a 2rem (size-8) action + --icon-size: 18px; + /* Inset of a centered .size-icon glyph within a 2rem (size-8) action button — i.e. (32px − icon-size) / 2. Use as a negative margin on a chat-message action bar so the leftmost icon's visual edge aligns with the message text edge. Auto-tracks --icon-size. */ - --icon-btn-inset: calc((2rem - var(--icon-size)) / 2); + --icon-btn-inset: calc((2rem - var(--icon-size)) / 2); } .dark { - /* Exact palette from apps/studio/index_chat.html mockup. Using hex so the + /* Exact palette from apps/studio/index_chat.html mockup. Using hex so the rendered surface matches the mockup pixel-for-pixel — OKLCH conversion drifted ~3% darker and shifted the neutral hue. */ - --background: #1f2023; - --foreground: #ececee; - --card: #2d2e32; - --card-foreground: #ececee; - --popover: #2d2e32; - --popover-foreground: #ececee; - --primary: #17b88b; - --primary-foreground: oklch(1 0 0); - --secondary: #2e3035; - --secondary-foreground: #ececee; - --muted: #2e3035; - --muted-foreground: #999999; - --accent: #2e3035; - --accent-foreground: #ececee; - --destructive: oklch(0.6368 0.2078 25.3313); - /* --border / --input one step lighter than --muted so outlines and form + --background: #1f2023; + --foreground: #ececee; + --card: #2d2e32; + --card-foreground: #ececee; + --popover: #2d2e32; + --popover-foreground: #ececee; + --primary: #17b88b; + --primary-foreground: oklch(1 0 0); + --secondary: #2e3035; + --secondary-foreground: #ececee; + --muted: #2e3035; + --muted-foreground: #999999; + --accent: #2e3035; + --accent-foreground: #ececee; + --destructive: oklch(0.6368 0.2078 25.3313); + /* --border / --input one step lighter than --muted so outlines and form borders stay visible on muted surfaces (right config panel, export tiles, quant chips) and keep subtle contrast on card. */ - --border: #3a3d42; - --input: #3a3d42; - --ring: #17b88b; - --chart-1: oklch(0.7511 0.1407 166.2284); - --chart-2: oklch(0.75 0.14 136.5572); - --chart-3: oklch(0.7554 0.1285 197.339); - --chart-4: oklch(0.7503 0.1199 346.7805); - --chart-5: oklch(0.799 0.1196 84.6633); - --sidebar: #18181a; - --sidebar-foreground: #ececee; - --sidebar-primary: #17b88b; - --sidebar-primary-foreground: oklch(1 0 0); - --sidebar-accent: #2f2f31; - --sidebar-accent-foreground: #ececee; - --sidebar-border: #2d2d2f; - --sidebar-ring: #17b88b; - --destructive-foreground: oklch(1 0 0); - --radius: 0.625rem; - --font-sans: "Inter Variable", ui-sans-serif, sans-serif, system-ui; - --font-serif: Source Serif 4, serif; - --font-mono: JetBrains Mono, monospace; - --shadow-color: hsl(0 0% 0%); - --shadow-opacity: 0; - --shadow-blur: 0px; - --shadow-spread: 0px; - --shadow-offset-x: 0px; - --shadow-offset-y: 0px; - --letter-spacing: 0em; - --spacing: 0.25rem; - --shadow-2xs: 0px 0px 0px 0px hsl(0 0% 0% / 0); - --shadow-xs: 0px 0px 0px 0px hsl(0 0% 0% / 0); - --shadow-sm: 0px 0px 0px 0px hsl(0 0% 0% / 0), 0px 1px 2px 0px hsl(0 0% 0% / 0); - --shadow: 0px 0px 0px 0px hsl(0 0% 0% / 0), 0px 1px 2px 0px hsl(0 0% 0% / 0); - --shadow-md: 0px 0px 0px 0px hsl(0 0% 0% / 0), 0px 2px 4px 0px hsl(0 0% 0% / 0); - --shadow-lg: 0px 0px 0px 0px hsl(0 0% 0% / 0), 0px 4px 6px 0px hsl(0 0% 0% / 0); - --shadow-xl: 0px 0px 0px 0px hsl(0 0% 0% / 0), 0px 8px 10px 0px hsl(0 0% 0% / 0); - --shadow-2xl: 0px 0px 0px 0px hsl(0 0% 0% / 0); + --border: #3a3d42; + --input: #3a3d42; + --ring: #17b88b; + --chart-1: oklch(0.7511 0.1407 166.2284); + --chart-2: oklch(0.75 0.14 136.5572); + --chart-3: oklch(0.7554 0.1285 197.339); + --chart-4: oklch(0.7503 0.1199 346.7805); + --chart-5: oklch(0.799 0.1196 84.6633); + --sidebar: #18181a; + --sidebar-foreground: #ececee; + --sidebar-primary: #17b88b; + --sidebar-primary-foreground: oklch(1 0 0); + --sidebar-accent: #2f2f31; + --sidebar-accent-foreground: #ececee; + --sidebar-border: #2d2d2f; + --sidebar-ring: #17b88b; + --destructive-foreground: oklch(1 0 0); + --radius: 0.625rem; + --font-sans: "Inter Variable", ui-sans-serif, sans-serif, system-ui; + --font-serif: Source Serif 4, serif; + --font-mono: JetBrains Mono, monospace; + --shadow-color: hsl(0 0% 0%); + --shadow-opacity: 0; + --shadow-blur: 0px; + --shadow-spread: 0px; + --shadow-offset-x: 0px; + --shadow-offset-y: 0px; + --letter-spacing: 0em; + --spacing: 0.25rem; + --shadow-2xs: 0px 0px 0px 0px hsl(0 0% 0% / 0); + --shadow-xs: 0px 0px 0px 0px hsl(0 0% 0% / 0); + --shadow-sm: 0px 0px 0px 0px hsl(0 0% 0% / 0), 0px 1px 2px 0px + hsl(0 0% 0% / 0); + --shadow: 0px 0px 0px 0px hsl(0 0% 0% / 0), 0px 1px 2px 0px hsl(0 0% 0% / 0); + --shadow-md: 0px 0px 0px 0px hsl(0 0% 0% / 0), 0px 2px 4px 0px + hsl(0 0% 0% / 0); + --shadow-lg: 0px 0px 0px 0px hsl(0 0% 0% / 0), 0px 4px 6px 0px + hsl(0 0% 0% / 0); + --shadow-xl: 0px 0px 0px 0px hsl(0 0% 0% / 0), 0px 8px 10px 0px + hsl(0 0% 0% / 0); + --shadow-2xl: 0px 0px 0px 0px hsl(0 0% 0% / 0); - --nav-fg: #c7c7c4; - --nav-fg-muted: #96979b; - --nav-surface-hover: #2e2e30; - --nav-icon-idle: #5c5c5c; - --nav-beta-border: #3a3c3f; - --panel-surface-hover: #3a3c42; - /* Right-side chat-parameters panel: matches the chat content + --nav-fg: #c7c7c4; + --nav-fg-muted: #96979b; + --nav-surface-hover: #2e2e30; + --nav-icon-idle: #5c5c5c; + --nav-beta-border: #3a3c3f; + --panel-surface-hover: #3a3c42; + /* Right-side chat-parameters panel: matches the chat content surface in both themes — distinction from the left sidebar (#18181a, the deepest surface) is handled by the left border alone. Tracks `--background` so any future tweaks to the chat surface flow through automatically. */ - --panel-surface: var(--background); - --panel-surface-fg: var(--foreground); - --panel-input-surface: #2a2b2e; - --panel-input-surface-hover: #2e3033; - /* Soft neutral gray for muted text and sliders. Pure-ish #ababab + --panel-surface: var(--background); + --panel-surface-fg: var(--foreground); + --panel-input-surface: #2a2b2e; + --panel-input-surface-hover: #2e3033; + /* Soft neutral gray for muted text and sliders. Pure-ish #ababab reads as quiet on the dark panel without going colored. */ - --panel-surface-fg-muted: #ababab; - /* Dark-mode slider tone matches muted text — user wants the dark + --panel-surface-fg-muted: #ababab; + /* Dark-mode slider tone matches muted text — user wants the dark theme slider unchanged from the previous behavior. */ - --panel-slider-fg: #ababab; - /* Chat-message action icons. A touch lighter than the previous + --panel-slider-fg: #ababab; + /* Chat-message action icons. A touch lighter than the previous #b8b8b8 so the icons read clearly without going near pure white; hover restores full --foreground for affordance. */ - --chat-icon-fg: #d8d8d8; - --chat-icon-fg-hover: var(--foreground); - --chat-icon-bg-hover: #2d2e32; + --chat-icon-fg: #d8d8d8; + --chat-icon-fg-hover: var(--foreground); + --chat-icon-bg-hover: #2d2e32; } @theme inline { - --font-sans: "Inter Variable", ui-sans-serif, sans-serif, system-ui; - --font-heading: "Hellix", "Space Grotesk Variable", var(--font-sans); - --color-sidebar-ring: var(--sidebar-ring); - --color-sidebar-border: var(--sidebar-border); - --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); - --color-sidebar-accent: var(--sidebar-accent); - --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); - --color-sidebar-primary: var(--sidebar-primary); - --color-sidebar-foreground: var(--sidebar-foreground); - --color-sidebar: var(--sidebar); - --color-chart-5: var(--chart-5); - --color-chart-4: var(--chart-4); - --color-chart-3: var(--chart-3); - --color-chart-2: var(--chart-2); - --color-chart-1: var(--chart-1); - --color-code-block: #181818; - --color-ring: var(--ring); - --color-input: var(--input); - --color-border: var(--border); - --color-destructive: var(--destructive); - --color-accent-foreground: var(--accent-foreground); - --color-accent: var(--accent); - --color-muted-foreground: var(--muted-foreground); - --color-muted: var(--muted); - --color-secondary-foreground: var(--secondary-foreground); - --color-secondary: var(--secondary); - --color-primary-foreground: var(--primary-foreground); - --color-primary: var(--primary); - --color-popover-foreground: var(--popover-foreground); - --color-popover: var(--popover); - --color-card-foreground: var(--card-foreground); - --color-card: var(--card); - --color-foreground: var(--foreground); - --color-background: var(--background); - --radius-sm: calc(var(--radius) - 4px); - --radius-md: calc(var(--radius) - 2px); - --radius-lg: var(--radius); - --radius-xl: calc(var(--radius) + 4px); - --radius-2xl: calc(var(--radius) + 8px); - --radius-3xl: calc(var(--radius) + 12px); - --radius-4xl: calc(var(--radius) + 16px); - --font-mono: JetBrains Mono, monospace; - --font-serif: Source Serif 4, serif; - --radius: 1.1rem; - --tracking-tighter: calc(var(--tracking-normal) - 0.05em); - --tracking-tight: calc(var(--tracking-normal) - 0.025em); - --tracking-wide: calc(var(--tracking-normal) + 0.025em); - --tracking-wider: calc(var(--tracking-normal) + 0.05em); - --tracking-widest: calc(var(--tracking-normal) + 0.1em); - --tracking-normal: var(--tracking-normal); - /*--shadow-2xl: var(--shadow-2xl);*/ - /*--shadow-xl: var(--shadow-xl);*/ - /*--shadow-lg: var(--shadow-lg);*/ - /*--shadow-md: var(--shadow-md);*/ - /*--shadow: var(--shadow);*/ - /*--shadow-sm: var(--shadow-sm);*/ - /*--shadow-xs: var(--shadow-xs);*/ - /*--shadow-2xs: var(--shadow-2xs);*/ - /*--spacing: var(--spacing);*/ - /*--letter-spacing: var(--letter-spacing);*/ - /*--shadow-offset-y: var(--shadow-offset-y);*/ - /*--shadow-offset-x: var(--shadow-offset-x);*/ - /*--shadow-spread: var(--shadow-spread);*/ - /*--shadow-blur: var(--shadow-blur);*/ - /*--shadow-opacity: var(--shadow-opacity);*/ - /*--color-shadow-color: var(--shadow-color);*/ - --color-destructive-foreground: var(--destructive-foreground); + --font-sans: "Inter Variable", ui-sans-serif, sans-serif, system-ui; + --font-heading: "Hellix", "Space Grotesk Variable", var(--font-sans); + --color-sidebar-ring: var(--sidebar-ring); + --color-sidebar-border: var(--sidebar-border); + --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); + --color-sidebar-accent: var(--sidebar-accent); + --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); + --color-sidebar-primary: var(--sidebar-primary); + --color-sidebar-foreground: var(--sidebar-foreground); + --color-sidebar: var(--sidebar); + --color-chart-5: var(--chart-5); + --color-chart-4: var(--chart-4); + --color-chart-3: var(--chart-3); + --color-chart-2: var(--chart-2); + --color-chart-1: var(--chart-1); + --color-code-block: #181818; + --color-ring: var(--ring); + --color-input: var(--input); + --color-border: var(--border); + --color-destructive: var(--destructive); + --color-accent-foreground: var(--accent-foreground); + --color-accent: var(--accent); + --color-muted-foreground: var(--muted-foreground); + --color-muted: var(--muted); + --color-secondary-foreground: var(--secondary-foreground); + --color-secondary: var(--secondary); + --color-primary-foreground: var(--primary-foreground); + --color-primary: var(--primary); + --color-popover-foreground: var(--popover-foreground); + --color-popover: var(--popover); + --color-card-foreground: var(--card-foreground); + --color-card: var(--card); + --color-foreground: var(--foreground); + --color-background: var(--background); + --radius-sm: calc(var(--radius) - 4px); + --radius-md: calc(var(--radius) - 2px); + --radius-lg: var(--radius); + --radius-xl: calc(var(--radius) + 4px); + --radius-2xl: calc(var(--radius) + 8px); + --radius-3xl: calc(var(--radius) + 12px); + --radius-4xl: calc(var(--radius) + 16px); + --font-mono: JetBrains Mono, monospace; + --font-serif: Source Serif 4, serif; + --radius: 1.1rem; + --tracking-tighter: calc(var(--tracking-normal) - 0.05em); + --tracking-tight: calc(var(--tracking-normal) - 0.025em); + --tracking-wide: calc(var(--tracking-normal) + 0.025em); + --tracking-wider: calc(var(--tracking-normal) + 0.05em); + --tracking-widest: calc(var(--tracking-normal) + 0.1em); + --tracking-normal: var(--tracking-normal); + /*--shadow-2xl: var(--shadow-2xl);*/ + /*--shadow-xl: var(--shadow-xl);*/ + /*--shadow-lg: var(--shadow-lg);*/ + /*--shadow-md: var(--shadow-md);*/ + /*--shadow: var(--shadow);*/ + /*--shadow-sm: var(--shadow-sm);*/ + /*--shadow-xs: var(--shadow-xs);*/ + /*--shadow-2xs: var(--shadow-2xs);*/ + /*--spacing: var(--spacing);*/ + /*--letter-spacing: var(--letter-spacing);*/ + /*--shadow-offset-y: var(--shadow-offset-y);*/ + /*--shadow-offset-x: var(--shadow-offset-x);*/ + /*--shadow-spread: var(--shadow-spread);*/ + /*--shadow-blur: var(--shadow-blur);*/ + /*--shadow-opacity: var(--shadow-opacity);*/ + /*--color-shadow-color: var(--shadow-color);*/ + --color-destructive-foreground: var(--destructive-foreground); - --color-nav-fg: var(--nav-fg); - --color-nav-fg-muted: var(--nav-fg-muted); - --color-nav-surface-hover: var(--nav-surface-hover); - --color-nav-icon-idle: var(--nav-icon-idle); - --color-nav-beta-border: var(--nav-beta-border); - --color-panel-surface-hover: var(--panel-surface-hover); - --color-panel-surface: var(--panel-surface); - --color-panel-surface-fg: var(--panel-surface-fg); - --color-panel-surface-fg-muted: var(--panel-surface-fg-muted); - --color-chat-icon-fg: var(--chat-icon-fg); - --color-chat-icon-fg-hover: var(--chat-icon-fg-hover); - --color-chat-icon-bg-hover: var(--chat-icon-bg-hover); + --color-nav-fg: var(--nav-fg); + --color-nav-fg-muted: var(--nav-fg-muted); + --color-nav-surface-hover: var(--nav-surface-hover); + --color-nav-icon-idle: var(--nav-icon-idle); + --color-nav-beta-border: var(--nav-beta-border); + --color-panel-surface-hover: var(--panel-surface-hover); + --color-panel-surface: var(--panel-surface); + --color-panel-surface-fg: var(--panel-surface-fg); + --color-panel-surface-fg-muted: var(--panel-surface-fg-muted); + --color-chat-icon-fg: var(--chat-icon-fg); + --color-chat-icon-fg-hover: var(--chat-icon-fg-hover); + --color-chat-icon-bg-hover: var(--chat-icon-bg-hover); - --animate-pulse: pulse var(--duration) ease-out infinite; + --animate-pulse: pulse var(--duration) ease-out infinite; - @keyframes pulse { + @keyframes pulse { + 0%, + 100% { + box-shadow: 0 0 0 0 var(--pulse-color); + } - 0%, - 100% { - box-shadow: 0 0 0 0 var(--pulse-color); - } + 50% { + box-shadow: 0 0 0 8px var(--pulse-color); + } + } - 50% { - box-shadow: 0 0 0 8px var(--pulse-color); - } - } + --animate-shiny-text: shiny-text 8s infinite; - --animate-shiny-text: shiny-text 8s infinite; + @keyframes shiny-text { + 0%, + 90%, + 100% { + background-position: calc(-100% - var(--shiny-width)) 0; + } - @keyframes shiny-text { + 30%, + 60% { + background-position: calc(100% + var(--shiny-width)) 0; + } + } - 0%, - 90%, - 100% { - background-position: calc(-100% - var(--shiny-width)) 0; - } + --animate-icon-pop: icon-pop 0.3s ease-out; - 30%, - 60% { - background-position: calc(100% + var(--shiny-width)) 0; - } - } + @keyframes icon-pop { + 0% { + transform: scale(1); + } - --animate-icon-pop: icon-pop 0.3s ease-out; + 45% { + transform: scale(1.08); + } - @keyframes icon-pop { - 0% { - transform: scale(1); - } + 100% { + transform: scale(1); + } + } - 45% { - transform: scale(1.08); - } + --animate-shine: shine var(--duration) infinite linear; - 100% { - transform: scale(1); - } - } + @keyframes shine { + 0% { + background-position: 0% 0%; + } - --animate-shine: shine var(--duration) infinite linear; + 50% { + background-position: 100% 100%; + } - @keyframes shine { - 0% { - background-position: 0% 0%; - } - - 50% { - background-position: 100% 100%; - } - - to { - background-position: 0% 0%; - } - } + to { + background-position: 0% 0%; + } + } } @layer base { - * { - @apply border-border outline-ring/50; - } + * { + @apply border-border outline-ring/50; + } - body { - @apply font-sans bg-background text-foreground; - letter-spacing: var(--tracking-normal); - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - text-rendering: optimizeLegibility; - } + body { + @apply font-sans bg-background text-foreground; + letter-spacing: var(--tracking-normal); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-rendering: optimizeLegibility; + } - html { - @apply font-sans h-full; - } + html { + @apply font-sans h-full; + } - body, - #root { - @apply h-full; - } + body, + #root { + @apply h-full; + } - body[data-scroll-locked] { - margin-right: 0 !important; - } + body[data-scroll-locked] { + margin-right: 0 !important; + } - h1, - h2, - h3, - h4, - h5, - h6 { - font-family: var(--font-sans); - letter-spacing: -0.02em; - } + h1, + h2, + h3, + h4, + h5, + h6 { + font-family: var(--font-sans); + letter-spacing: -0.02em; + } } @layer utilities { - - /* Heading font utility — the logo applies its own dark-mode tracking + /* Heading font utility — the logo applies its own dark-mode tracking to offset optical bloom at large sizes. For small UI text (menus, nav items) we keep a single tight tracking in both themes, relying on global antialiased font-smoothing to neutralize the bloom. */ - .font-heading { - font-family: var(--font-heading); - letter-spacing: -0.01em; - } + .font-heading { + font-family: var(--font-heading); + letter-spacing: -0.01em; + } - /* Dark mode loosens tracking to offset optical bloom on dark surfaces. */ - .tracking-nav { - letter-spacing: 0.015em; - } - .dark .tracking-nav { - letter-spacing: 0.03em; - } + /* Dark mode loosens tracking to offset optical bloom on dark surfaces. */ + .tracking-nav { + letter-spacing: 0.015em; + } + .dark .tracking-nav { + letter-spacing: 0.03em; + } - .nav-icon-btn { - @apply inline-flex h-7 w-7 items-center justify-center rounded-[10px] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring; - } + .nav-icon-btn { + @apply inline-flex h-7 w-7 items-center justify-center rounded-[10px] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring; + } - /* Standard icon size — drives every nav/menu/action-bar icon + /* Standard icon size — drives every nav/menu/action-bar icon (left sidebar, app-user menu, settings tabs, chat config toggle, right-panel close, chat message action bars, code-block actions). Pulls from --icon-size so a single edit retunes them all. */ - .size-icon { - width: var(--icon-size); - height: var(--icon-size); - } + .size-icon { + width: var(--icon-size); + height: var(--icon-size); + } - /* Pins Inter across themes; parent `font-heading` resolves to Geist in dark. */ - .nav-badge { - font-family: "Inter Variable", ui-sans-serif, system-ui, sans-serif; - } + /* Pins Inter across themes; parent `font-heading` resolves to Geist in dark. */ + .nav-badge { + font-family: "Inter Variable", ui-sans-serif, system-ui, sans-serif; + } - .sidebar-nav-btn { - color: var(--nav-fg); - } - .sidebar-nav-btn:hover, - .sidebar-nav-btn[data-active="true"], - .sidebar-nav-btn[data-state="open"], - .group\/recent-item:hover .sidebar-nav-btn, - .group\/recent-item:has(.sidebar-row-action[data-state="open"]) .sidebar-nav-btn, - .group\/run-item:hover .sidebar-nav-btn, - .group\/run-item:has(.sidebar-row-action[data-state="open"]) .sidebar-nav-btn { - background-color: var(--nav-surface-hover) !important; - color: #000 !important; - } - .dark .sidebar-nav-btn:hover, - .dark .sidebar-nav-btn[data-active="true"], - .dark .sidebar-nav-btn[data-state="open"], - .dark .group\/recent-item:hover .sidebar-nav-btn, - .dark .group\/recent-item:has(.sidebar-row-action[data-state="open"]) .sidebar-nav-btn, - .dark .group\/run-item:hover .sidebar-nav-btn, - .dark .group\/run-item:has(.sidebar-row-action[data-state="open"]) .sidebar-nav-btn { - color: #fff !important; - } + .sidebar-nav-btn { + color: var(--nav-fg); + } + .sidebar-nav-btn:hover, + .sidebar-nav-btn[data-active="true"], + .sidebar-nav-btn[data-state="open"], + .group\/recent-item:hover .sidebar-nav-btn, + .group\/recent-item:has(.sidebar-row-action[data-state="open"]) + .sidebar-nav-btn, + .group\/run-item:hover .sidebar-nav-btn, + .group\/run-item:has(.sidebar-row-action[data-state="open"]) + .sidebar-nav-btn { + background-color: var(--nav-surface-hover) !important; + color: #000 !important; + } + .dark .sidebar-nav-btn:hover, + .dark .sidebar-nav-btn[data-active="true"], + .dark .sidebar-nav-btn[data-state="open"], + .dark .group\/recent-item:hover .sidebar-nav-btn, + .dark + .group\/recent-item:has(.sidebar-row-action[data-state="open"]) + .sidebar-nav-btn, + .dark .group\/run-item:hover .sidebar-nav-btn, + .dark + .group\/run-item:has(.sidebar-row-action[data-state="open"]) + .sidebar-nav-btn { + color: #fff !important; + } - .sidebar-row-action { - @apply absolute top-0 bottom-0 right-0 inline-flex items-center justify-end pl-2 pr-1.5 opacity-0 pointer-events-none outline-none; - } - .sidebar-row-action[data-state="open"] { - @apply opacity-100 pointer-events-auto; - } - .sidebar-row-action-glyph { - @apply inline-flex size-6 items-center justify-center rounded-[10px] text-sidebar-foreground/55; - } + .sidebar-row-action { + @apply absolute top-0 bottom-0 right-0 inline-flex items-center justify-end pl-2 pr-1.5 opacity-0 pointer-events-none outline-none; + } + .sidebar-row-action[data-state="open"] { + @apply opacity-100 pointer-events-auto; + } + .sidebar-row-action-glyph { + @apply inline-flex size-6 items-center justify-center rounded-[10px] text-sidebar-foreground/55; + } - /* Branch picker chevron buttons sit beside action bar icon buttons + /* Branch picker chevron buttons sit beside action bar icon buttons (size-8, rounded-[10px]). Height + radius match for visual alignment, but width is tighter so the small chevron glyph reads as a compact control rather than a full-size icon button. */ - .aui-branch-chevron-btn { - @apply inline-flex h-8 w-6 cursor-pointer items-center justify-center rounded-[10px] p-0 text-chat-icon-fg transition-colors hover:bg-chat-icon-bg-hover hover:text-chat-icon-fg-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-transparent; - } - .sidebar-row-action:hover .sidebar-row-action-glyph, - .sidebar-row-action[data-state="open"] .sidebar-row-action-glyph { - @apply bg-nav-surface-hover text-nav-fg; - } - .dark .sidebar-row-action:hover .sidebar-row-action-glyph, - .dark .sidebar-row-action[data-state="open"] .sidebar-row-action-glyph { - color: #fff; - } + .aui-branch-chevron-btn { + @apply inline-flex h-8 w-6 cursor-pointer items-center justify-center rounded-[10px] p-0 text-chat-icon-fg transition-colors hover:bg-chat-icon-bg-hover hover:text-chat-icon-fg-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-transparent; + } + .sidebar-row-action:hover .sidebar-row-action-glyph, + .sidebar-row-action[data-state="open"] .sidebar-row-action-glyph { + @apply bg-nav-surface-hover text-nav-fg; + } + .dark .sidebar-row-action:hover .sidebar-row-action-glyph, + .dark .sidebar-row-action[data-state="open"] .sidebar-row-action-glyph { + color: #fff; + } - .sidebar-sticky-label { - @apply sticky top-0 z-20 rounded-none bg-sidebar pt-0 pb-1.5 pl-[18px] pr-4 text-[13px]! font-medium normal-case tracking-[0.04em] text-nav-fg-muted focus-visible:ring-0! focus-visible:outline-none shadow-[0_-8px_0_0_var(--sidebar)] transition-shadow duration-150; - } - .sidebar-sticky-label.is-scrolled { - @apply shadow-[0_-8px_0_0_var(--sidebar),0_0.5px_0_0_var(--sidebar-border)]; - } + .sidebar-sticky-label { + @apply sticky top-0 z-20 rounded-none bg-sidebar pt-0 pb-1.5 pl-[18px] pr-4 text-[13px]! font-medium normal-case tracking-[0.04em] text-nav-fg-muted focus-visible:ring-0! focus-visible:outline-none shadow-[0_-8px_0_0_var(--sidebar)] transition-shadow duration-150; + } + .sidebar-sticky-label.is-scrolled { + @apply shadow-[0_-8px_0_0_var(--sidebar),0_0.5px_0_0_var(--sidebar-border)]; + } - /* Neutral panel input surface — sidesteps the green cast on + .app-sidebar-top-actions { + position: relative; + z-index: 25; + transition: box-shadow var(--duration-fast) ease-out; + } + + .app-sidebar-top-actions.is-scrolled { + box-shadow: 0 0.5px 0 0 var(--sidebar-border), 0 10px 18px -18px + rgba(0, 0, 0, 0.42); + } + + .dark .app-sidebar-top-actions.is-scrolled { + box-shadow: 0 0.5px 0 0 var(--sidebar-border), 0 12px 20px -18px + rgba(0, 0, 0, 0.72); + } + + .app-sidebar-scroll-region { + mask-repeat: no-repeat; + mask-size: 100% 100%; + transition: mask-image var(--duration-fast) ease-out; + } + + .app-sidebar-scroll-region.is-scrolled { + mask-image: linear-gradient(to bottom, transparent 0, #000 18px, #000 100%); + } + + .app-sidebar-scroll-region.can-scroll-down { + mask-image: linear-gradient( + to bottom, + #000 0, + #000 calc(100% - 18px), + transparent 100% + ); + } + + .app-sidebar-scroll-region.is-scrolled.can-scroll-down { + mask-image: linear-gradient( + to bottom, + transparent 0, + #000 18px, + #000 calc(100% - 18px), + transparent 100% + ); + } + + /* Neutral panel input surface — sidesteps the green cast on `--input` / `--border` (both have a small chroma at hue ~165 in light mode). Same value drives the preset input pill, the system prompt button, and the chat-template textarea so all three read as one quiet gray family, matching the focused-edit-number tint. */ - .panel-input-group { - @apply !h-9 min-h-9 min-w-0 items-stretch gap-0 rounded-[10px] pr-0 transition-colors focus-within:ring-0 focus-within:shadow-none; - border: 0 !important; - background-color: var(--panel-input-surface); - } - .panel-input-group:has([data-slot="input-group-control"]:focus-visible) { - border: 0 !important; - box-shadow: none; - } + .panel-input-group { + @apply !h-9 min-h-9 min-w-0 items-stretch gap-0 rounded-[10px] pr-0 transition-colors focus-within:ring-0 focus-within:shadow-none; + border: 0 !important; + background-color: var(--panel-input-surface); + } + .panel-input-group:has([data-slot="input-group-control"]:focus-visible) { + border: 0 !important; + box-shadow: none; + } - /* Neutral surface for the larger panel text containers — system + /* Neutral surface for the larger panel text containers — system prompt preview button and chat-template textarea — so they share the same gray as the preset input pill and don't pick up the theme's slight green-cast `--input`. */ - .panel-text-surface { - @apply rounded-[20px] border-0 transition-colors; - background-color: var(--panel-input-surface); - } - .panel-text-surface:hover { - background-color: var(--panel-input-surface-hover); - } + .panel-text-surface { + @apply rounded-[20px] border-0 transition-colors; + background-color: var(--panel-input-surface); + } + .panel-text-surface:hover { + background-color: var(--panel-input-surface-hover); + } - /* Sidebar sliders: soft neutral grays — active fill and thumb stay + /* Sidebar sliders: soft neutral grays — active fill and thumb stay in the same neutral family as the panel surface so the controls read as quiet, modern, and uncluttered. Flat (no shadow), small thumb, no ring. The track's translucent neutral adapts to either theme; the fill/thumb pick a mid-gray with enough contrast to read on the panel without competing with text. */ - /* Inactive track: barely-there alpha so it reads as a faint hint + /* Inactive track: barely-there alpha so it reads as a faint hint rather than a visible bar — the active fill carries the value, the track just suggests the slider's extent. Same alpha both themes; the black/white base flips automatically per theme. */ - .panel-slider [data-slot="slider-track"] { - height: 0.25rem !important; - background-color: rgb(0 0 0 / 0.025) !important; - } - .dark .panel-slider [data-slot="slider-track"] { - background-color: rgb(255 255 255 / 0.025) !important; - } - /* Sliders in the right-side parameters panel. + .panel-slider [data-slot="slider-track"] { + height: 0.25rem !important; + background-color: rgb(0 0 0 / 0.025) !important; + } + .dark .panel-slider [data-slot="slider-track"] { + background-color: rgb(255 255 255 / 0.025) !important; + } + /* Sliders in the right-side parameters panel. * * Color: every interactive surface (active fill, thumb body, thumb * border, hover/press halo) resolves through a single token — @@ -608,33 +661,33 @@ * Halo lifecycle: deliberately no `:focus` — pointer focus persists * after release and would leave a stale halo. `:focus-visible` * keeps keyboard navigation accessible (Tab + arrows). */ - .panel-slider .bg-primary { - background-color: var(--panel-slider-fg) !important; - } - .panel-slider [data-slot="slider-thumb"] { - width: 0.875rem !important; - height: 0.875rem !important; - background-color: var(--panel-slider-fg) !important; - border-color: var(--panel-slider-fg) !important; - transform: none !important; - box-shadow: none !important; - transition: box-shadow 140ms ease-out !important; - } - .panel-slider [data-slot="slider-thumb"]:hover, - .panel-slider [data-slot="slider-thumb"]:focus-visible, - .panel-slider:active [data-slot="slider-thumb"] { - box-shadow: 0 0 0 10px - color-mix(in srgb, var(--panel-slider-fg) 18%, transparent) !important; - } - /* Active press: slightly larger / more opaque ring than passive + .panel-slider .bg-primary { + background-color: var(--panel-slider-fg) !important; + } + .panel-slider [data-slot="slider-thumb"] { + width: 0.875rem !important; + height: 0.875rem !important; + background-color: var(--panel-slider-fg) !important; + border-color: var(--panel-slider-fg) !important; + transform: none !important; + box-shadow: none !important; + transition: box-shadow 140ms ease-out !important; + } + .panel-slider [data-slot="slider-thumb"]:hover, + .panel-slider [data-slot="slider-thumb"]:focus-visible, + .panel-slider:active [data-slot="slider-thumb"] { + box-shadow: 0 0 0 10px + color-mix(in srgb, var(--panel-slider-fg) 18%, transparent) !important; + } + /* Active press: slightly larger / more opaque ring than passive hover, so the haptic reads stronger when the user is actively manipulating the value. */ - .panel-slider:active [data-slot="slider-thumb"] { - box-shadow: 0 0 0 12px - color-mix(in srgb, var(--panel-slider-fg) 22%, transparent) !important; - } + .panel-slider:active [data-slot="slider-thumb"] { + box-shadow: 0 0 0 12px + color-mix(in srgb, var(--panel-slider-fg) 22%, transparent) !important; + } - /* Inline numeric input — used for slider values and Context Length. + /* Inline numeric input — used for slider values and Context Length. Designed to read as *editable text* rather than a pill button so it doesn't mirror the Select/dropdown components on the panel. Default: transparent box, no border, no ring, sized by the @@ -642,443 +695,494 @@ Hover/focus: very light bg fade-in to signal editability — just enough to read as interactive, not enough to compete with the slider row's quiet aesthetic. */ - .panel-number-input { - @apply h-7 rounded-md border-0 bg-transparent px-1.5 text-right text-[13px]! font-medium tabular-nums text-nav-fg shadow-none transition-colors hover:bg-black/[0.04] focus:bg-black/[0.05] focus-visible:ring-0! focus-visible:outline-none md:text-[13px]!; - } - .dark .panel-number-input { - @apply hover:bg-white/[0.04] focus:bg-white/[0.06]; - } + .panel-number-input { + @apply h-7 rounded-md border-0 bg-transparent px-1.5 text-right text-[13px]! font-medium tabular-nums text-nav-fg shadow-none transition-colors hover:bg-black/[0.04] focus:bg-black/[0.05] focus-visible:ring-0! focus-visible:outline-none md:text-[13px]!; + } + .dark .panel-number-input { + @apply hover:bg-white/[0.04] focus:bg-white/[0.06]; + } - /* Switch — unsloth-green track when active, slider-gray thumb in + /* Switch — unsloth-green track when active, slider-gray thumb in both states. Keeps the on-state recognizable as an "engaged" primary control while the moving thumb sits in the same neutral palette as the panel sliders, tying every control in the panel to a single gray family. Unchecked track keeps shadcn's default bg-input for the standard off affordance. */ - .panel-switch[data-state="checked"] { - background-color: var(--primary) !important; - } - .panel-switch [data-slot="switch-thumb"] { - background-color: var(--panel-slider-fg) !important; - } - .panel-switch[data-state="checked"] [data-slot="switch-thumb"] { - background-color: #ffffff !important; - } + .panel-switch[data-state="checked"] { + background-color: var(--primary) !important; + } + .panel-switch [data-slot="switch-thumb"] { + background-color: var(--panel-slider-fg) !important; + } + .panel-switch[data-state="checked"] [data-slot="switch-thumb"] { + background-color: #ffffff !important; + } - /* Compact tooltip — small black pill with white text. Used for short + /* Compact tooltip — small black pill with white text. Used for short hover labels on chat-area icon buttons (Copy, Edit, Delete, Refresh, More, code-block actions) and the panel's info-icon hints. Corner radius is fixed at 8px so it tracks with the underlying icon button corners (also 8px) — keeps the tooltip visually anchored to its trigger rather than reading as a much larger floating pill. */ - .tooltip-compact { - @apply rounded-[10px] border-transparent bg-black px-2 py-1.5 text-[11px] font-medium leading-snug text-white shadow-md; - } + .tooltip-compact { + @apply rounded-[10px] border-transparent bg-black px-2 py-1.5 text-[11px] font-medium leading-snug text-white shadow-md; + } - /* Rich tooltip — used for the context-usage and token-counter + /* Rich tooltip — used for the context-usage and token-counter popups (multi-row metric breakdowns). Same black surface as the compact tooltips so chat-area popovers feel like one family. Corner radius matches the user-profile dropdown in the left sidebar (14px) so panel-level menu surfaces share a single roundness. Uses the heading font with tracking for the structured content. Same in both themes. */ - .tooltip-rich { - @apply rounded-[16px] border-transparent bg-black px-4 py-3 font-heading tracking-wide text-white shadow-[0_8px_28px_-6px_rgba(0,0,0,0.32)]; - } - /* Row-label color override — the popups reuse the existing prose + .tooltip-rich { + @apply rounded-[16px] border-transparent bg-black px-4 py-3 font-heading tracking-wide text-white shadow-[0_8px_28px_-6px_rgba(0,0,0,0.32)]; + } + /* Row-label color override — the popups reuse the existing prose `text-muted-foreground` class. Fixed light gray on the black surface keeps the label clearly legible while staying distinct from the values (full white). */ - .tooltip-rich .text-muted-foreground { - color: #b1b1b1 !important; - } - .tooltip-rich .border-border\/40 { - border-color: rgb(255 255 255 / 0.12) !important; - } + .tooltip-rich .text-muted-foreground { + color: #b1b1b1 !important; + } + .tooltip-rich .border-border\/40 { + border-color: rgb(255 255 255 / 0.12) !important; + } - .app-user-menu [data-slot="dropdown-menu-item"] { - height: 32px; - padding: 0 0.625rem !important; - gap: 8.5px !important; - border-radius: 10px; - font-weight: 500; - font-size: 14.5px; - line-height: 19px; - letter-spacing: 0.015em; - color: var(--nav-fg); - } - .dark .app-user-menu [data-slot="dropdown-menu-item"] { - letter-spacing: 0.03em; - } - .app-user-menu [data-slot="dropdown-menu-item"] svg { - width: 19px !important; - height: 19px !important; - flex-shrink: 0; - } - .app-user-menu [data-slot="dropdown-menu-item"]:focus { - background-color: var(--nav-surface-hover); - color: #000; - } - .dark .app-user-menu [data-slot="dropdown-menu-item"]:focus { - color: #fff; - } - .app-user-menu [data-slot="dropdown-menu-item"]:focus * { - color: #000 !important; - } - .dark .app-user-menu [data-slot="dropdown-menu-item"]:focus * { - color: #fff !important; - } + .app-user-menu [data-slot="dropdown-menu-item"] { + height: 32px; + padding: 0 0.625rem !important; + gap: 8.5px !important; + border-radius: 10px; + font-weight: 500; + font-size: 14.5px; + line-height: 19px; + letter-spacing: 0.015em; + color: var(--nav-fg); + } + .dark .app-user-menu [data-slot="dropdown-menu-item"] { + letter-spacing: 0.03em; + } + .app-user-menu [data-slot="dropdown-menu-item"] svg { + width: 19px !important; + height: 19px !important; + flex-shrink: 0; + } + .app-user-menu [data-slot="dropdown-menu-item"]:focus { + background-color: var(--nav-surface-hover); + color: #000; + } + .dark .app-user-menu [data-slot="dropdown-menu-item"]:focus { + color: #fff; + } + .app-user-menu [data-slot="dropdown-menu-item"]:focus * { + color: #000 !important; + } + .dark .app-user-menu [data-slot="dropdown-menu-item"]:focus * { + color: #fff !important; + } - .menu-flat-destructive { - --destructive: #dc4848; - } - .dark .menu-flat-destructive { - --destructive: #ed7878; - } - .app-user-menu [data-slot="dropdown-menu-item"][data-variant="destructive"], - .app-user-menu [data-slot="dropdown-menu-item"][data-variant="destructive"]:focus { - color: var(--destructive); - } - .app-user-menu [data-slot="dropdown-menu-item"][data-variant="destructive"]:focus { - background-color: color-mix(in oklab, var(--destructive) 10%, transparent); - } - .app-user-menu [data-slot="dropdown-menu-item"][data-variant="destructive"]:focus * { - color: var(--destructive) !important; - } + .menu-flat-destructive { + --destructive: #dc4848; + } + .dark .menu-flat-destructive { + --destructive: #ed7878; + } + .app-user-menu [data-slot="dropdown-menu-item"][data-variant="destructive"], + .app-user-menu + [data-slot="dropdown-menu-item"][data-variant="destructive"]:focus { + color: var(--destructive); + } + .app-user-menu + [data-slot="dropdown-menu-item"][data-variant="destructive"]:focus { + background-color: color-mix(in oklab, var(--destructive) 10%, transparent); + } + .app-user-menu + [data-slot="dropdown-menu-item"][data-variant="destructive"]:focus + * { + color: var(--destructive) !important; + } - /* Elevated surface shadow (use ring-* for borders) */ - .shadow-border { - --tw-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); - --tw-shadow-colored: 0 4px 16px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), - var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); - } + /* Elevated surface shadow (use ring-* for borders) */ + .shadow-border { + --tw-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); + --tw-shadow-colored: 0 4px 16px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), + var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + } - .dark .shadow-border { - --tw-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); - } + .dark .shadow-border { + --tw-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); + } - .menu-soft-surface, - .menu-soft-surface-up { - --menu-soft-edge: rgba(0, 0, 0, 0.14); - --menu-soft-shadow: rgba(0, 0, 0, 0.18); - --menu-soft-offset-y: 8px; - --menu-soft-blur: 28px; - --menu-soft-spread: -6px; - @apply bg-popover text-popover-foreground; - box-shadow: - inset 0 0 0 1px var(--menu-soft-edge), - 0 var(--menu-soft-offset-y) var(--menu-soft-blur) - var(--menu-soft-spread) var(--menu-soft-shadow); - } - .menu-soft-surface-up { - --menu-soft-offset-y: -6px; - --menu-soft-spread: -8px; - } - .dark .menu-soft-surface, - .dark .menu-soft-surface-up { - --menu-soft-edge: rgba(255, 255, 255, 0.07); - --menu-soft-shadow: rgba(0, 0, 0, 0.28); - } + .menu-soft-surface, + .menu-soft-surface-up { + --menu-soft-edge: rgba(0, 0, 0, 0.14); + --menu-soft-shadow: rgba(0, 0, 0, 0.18); + --menu-soft-offset-y: 8px; + --menu-soft-blur: 28px; + --menu-soft-spread: -6px; + @apply bg-popover text-popover-foreground; + box-shadow: inset 0 0 0 1px var(--menu-soft-edge), 0 + var(--menu-soft-offset-y) var(--menu-soft-blur) var(--menu-soft-spread) + var(--menu-soft-shadow); + } + .menu-soft-surface-up { + --menu-soft-offset-y: -6px; + --menu-soft-spread: -8px; + } + .dark .menu-soft-surface, + .dark .menu-soft-surface-up { + --menu-soft-edge: rgba(255, 255, 255, 0.07); + --menu-soft-shadow: rgba(0, 0, 0, 0.28); + } - .chat-composer-surface { - @apply relative flex w-full flex-col rounded-[24px] bg-background dark:bg-card px-1 pt-2 outline-none transition-shadow; - font-family: var(--font-sans); - background-clip: padding-box; - box-shadow: 0 2px 8px -2px rgba(27, 27, 31, 0.16); - } + .chat-composer-surface { + @apply relative flex w-full flex-col rounded-[32px] bg-white dark:bg-card px-3 py-3 outline-none transition-shadow; + font-family: var(--font-sans); + background-clip: padding-box; + box-shadow: 0px 2px 8px -2px rgba(0, 0, 0, 0.16); + } - .dark .chat-composer-surface { - background-color: #2a2a2c; - box-shadow: none; - } + .dark .chat-composer-surface { + background-color: #2a2a2c; + box-shadow: none; + } - .composer-pill-btn { - @apply flex cursor-pointer items-center gap-1.5 rounded-full px-1.5 py-1.5 text-[14px] font-medium text-muted-foreground/70 transition-colors hover:bg-primary/10 dark:hover:bg-white/[0.08] disabled:cursor-not-allowed disabled:opacity-40; - } + .composer-pill-btn { + @apply flex h-6 cursor-pointer items-center gap-1 rounded-full pl-1 pr-2 py-0 text-[14px] font-medium leading-6 text-muted-foreground/75 transition-colors hover:bg-black/[0.06] dark:hover:bg-white/[0.08] disabled:cursor-not-allowed disabled:opacity-40; + } - .composer-pill-btn[data-active="true"] { - color: var(--primary); - } + .composer-pill-btn:is(:hover, :focus-visible), + .composer-pill-btn[data-active="true"] { + background-color: rgba(0, 0, 0, 0.08); + color: var(--foreground); + } - .composer-input { - @apply mt-2 mb-1 mx-3 min-h-12 w-[calc(100%-1.5rem)] resize-none overflow-y-auto bg-transparent pl-2 pr-4 pt-2 pb-3 text-sm font-[450] outline-none placeholder:text-muted-foreground focus-visible:ring-0; - } + .dark .composer-pill-btn:is(:hover, :focus-visible), + .dark .composer-pill-btn[data-active="true"] { + background-color: rgba(255, 255, 255, 0.08); + color: var(--foreground); + } - .composer-action-wrapper { - @apply relative mx-2 mb-2 flex items-center justify-between; - } + .composer-pill-btn svg { + width: 16px !important; + height: 16px !important; + flex-shrink: 0; + } - .composer-footer-note { - @apply mt-1.5 text-center text-[11px] tracking-[0.04em] text-muted-foreground; - font-family: var(--font-sans); - } + .composer-pill-close { + display: none; + } - /* Pill composer; own classes so compare-mode keeps its stacked layout. */ - .unsloth-composer-surface { - @apply relative flex w-full flex-col rounded-[28px] bg-background dark:bg-card px-3 py-2.5 outline-none transition-shadow; - font-family: var(--font-sans); - background-clip: padding-box; - /* Light-mode elevation matches Gemini's search box (Lumi level-1): a soft, - diffuse ambient shadow rather than a tight drop shadow. */ - box-shadow: - 0 1px 2px 0 rgba(0, 0, 0, 0.04), - 0 4px 12px 0 rgba(0, 0, 0, 0.08), - 0 8px 24px 0 rgba(0, 0, 0, 0.06); - } + .composer-pill-btn[data-active="true"]:not(:disabled):is( + :hover, + :focus-visible + ) { + padding-right: 0.25rem; + } - .unsloth-composer-surface:focus-within { - box-shadow: - 0 1px 2px 0 rgba(0, 0, 0, 0.04), - 0 4px 12px 0 rgba(0, 0, 0, 0.08), - 0 8px 24px 0 rgba(0, 0, 0, 0.06); - } + .composer-pill-btn[data-active="true"]:not(:disabled):is( + :hover, + :focus-visible + ) + .composer-pill-close { + display: inline-flex; + } - .dark .unsloth-composer-surface { - background-color: #2a2a2c; - box-shadow: none; - } + .composer-input { + @apply mb-1 min-h-10 w-full resize-none overflow-y-auto bg-transparent px-1.5 py-2 text-[15px] font-[450] leading-6 outline-none placeholder:text-muted-foreground focus-visible:ring-0; + } - /* Keep the expand/collapse width swap instant. A transition on width (e.g. + .composer-action-wrapper { + @apply relative mt-1 flex items-center justify-between; + } + + .composer-footer-note { + @apply mt-1.5 text-center text-[11px] tracking-[0.04em] text-muted-foreground; + font-family: var(--font-sans); + } + + /* Pill composer; own classes so compare-mode keeps its stacked layout. */ + .unsloth-composer-surface { + @apply relative flex w-full flex-col rounded-[32px] bg-white dark:bg-card px-3 py-3 outline-none transition-shadow; + font-family: var(--font-sans); + background-clip: padding-box; + box-shadow: 0px 2px 8px -2px rgba(0, 0, 0, 0.16); + } + + .unsloth-composer-surface:focus-within { + box-shadow: 0px 2px 10px -2px rgba(0, 0, 0, 0.18); + } + + .dark .unsloth-composer-surface, + .dark .unsloth-composer-surface:focus-within { + background-color: #2a2a2c; + box-shadow: none; + } + + /* Keep the expand/collapse width swap instant. A transition on width (e.g. the reduced-motion blanket rule) makes getComputedStyle().width lag a frame, so autosize measures the stale width and leaves a stray blank row. */ - .unsloth-composer-line, - .unsloth-composer-line .unsloth-composer-input, - .unsloth-composer-left { - transition-property: none !important; - } + .unsloth-composer-line, + .unsloth-composer-line .unsloth-composer-input, + .unsloth-composer-left { + transition-property: none !important; + } - /* Composer row: one centered line when empty; two rows (input over controls) + /* Composer row: one centered line when empty; two rows (input over controls) when filled, so the textarea never remounts. */ - .unsloth-composer-line { - @apply flex w-full flex-wrap items-center gap-0.5 px-1; - } + .unsloth-composer-line { + @apply flex w-full flex-wrap items-center gap-0.5 px-0; + } - .unsloth-composer-left { - @apply flex shrink-0 items-center gap-0.5; - order: 1; - /* Pull the plus button closer to the composer edge. */ - margin-left: -0.375rem; - } + .unsloth-composer-left { + @apply flex shrink-0 items-center gap-0.5; + order: 1; + /* Pull the plus button closer to the composer edge. */ + margin-left: -0.25rem; + } - .unsloth-composer-line .unsloth-composer-input { - order: 2; - } + .unsloth-composer-line .unsloth-composer-input { + order: 2; + } - .unsloth-composer-line .aui-composer-action-wrapper { - order: 3; - margin-left: auto; - } + .unsloth-composer-line .aui-composer-action-wrapper { + order: 3; + margin-left: auto; + } - .unsloth-composer-line[data-expanded="true"] .unsloth-composer-input { - order: 1; - flex-basis: 100%; - width: 100%; - /* Sits close to the left edge, near the plus. */ - padding-left: 0.375rem; - padding-top: 0.5rem; - padding-bottom: 0.5rem; - } + .unsloth-composer-line[data-expanded="true"] .unsloth-composer-input { + order: 1; + flex-basis: 100%; + width: 100%; + /* Sits close to the left edge, near the plus. */ + padding-left: 0.375rem; + padding-top: 0.5rem; + padding-bottom: 0.5rem; + } - .unsloth-composer-line[data-expanded="true"] .unsloth-composer-left { - order: 2; - } + .unsloth-composer-line[data-expanded="true"] .unsloth-composer-left { + order: 2; + } - /* Empty (placeholder shown): clamp back to one row. max-height beats the + /* Empty (placeholder shown): clamp back to one row. max-height beats the autosize textarea's inline !important height, so a cleared message leaves no stale tall box or stray scrollbar. */ - .unsloth-composer-input:placeholder-shown { - max-height: 40px !important; - overflow-y: hidden !important; - } + .unsloth-composer-input:placeholder-shown { + max-height: 40px !important; + overflow-y: hidden !important; + } - .unsloth-composer-input { - @apply min-h-[40px] min-w-0 flex-1 resize-none overflow-y-auto bg-transparent pl-0.5 pr-2 py-2 text-[15px] font-[450] leading-6 outline-none placeholder:text-muted-foreground focus-visible:ring-0; - } + .unsloth-composer-input { + @apply min-h-[40px] min-w-0 flex-1 resize-none overflow-y-auto bg-transparent pl-0.5 pr-2 py-2 text-[15px] font-[450] leading-6 outline-none placeholder:text-muted-foreground focus-visible:ring-0; + } - .unsloth-composer-plus { - @apply flex size-9 shrink-0 cursor-pointer items-center justify-center rounded-full text-foreground transition-colors hover:bg-muted-foreground/15 disabled:cursor-not-allowed disabled:opacity-40; - } + .unsloth-composer-plus { + @apply flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-full text-foreground transition-colors hover:bg-muted-foreground/15 disabled:cursor-not-allowed disabled:opacity-40; + } - .unsloth-composer-plus[data-state="open"] { - @apply bg-muted-foreground/15; - /* Radix's modal menu sets body pointer-events:none; re-enable on the open + .unsloth-composer-plus svg { + transition: transform var(--duration-normal) ease-in-out; + transform-origin: center; + } + + .unsloth-composer-plus[data-state="open"] { + @apply bg-muted-foreground/15; + /* Radix's modal menu sets body pointer-events:none; re-enable on the open trigger so the cursor and click-to-close work. */ - pointer-events: auto; - cursor: pointer; - } + pointer-events: auto; + cursor: pointer; + } - /* Set Hellix explicitly; .aui-thread-root resets --font-heading to sans. */ - .unsloth-welcome-title { - font-family: "Hellix", "Space Grotesk Variable", var(--font-sans); - font-weight: 500; - } + .unsloth-composer-plus[data-state="open"] svg { + transform: rotate(35deg); + } - /* Right-side Thinking pill (toggle or dropdown). */ - .unsloth-thinking-pill { - @apply inline-flex shrink-0 cursor-pointer items-center gap-1 rounded-full px-2.5 py-1.5 text-[14px] font-medium text-muted-foreground transition-colors hover:bg-muted-foreground/10 disabled:cursor-not-allowed disabled:opacity-40; - } + /* Set Hellix explicitly; .aui-thread-root resets --font-heading to sans. */ + .unsloth-welcome-title { + font-family: "Hellix", "Space Grotesk Variable", var(--font-sans); + font-weight: 500; + } - .unsloth-thinking-pill[data-active="true"] { - color: var(--primary); - } + /* Right-side Thinking pill (toggle or dropdown). */ + .unsloth-thinking-pill { + @apply inline-flex h-6 shrink-0 cursor-pointer items-center gap-1 rounded-full px-2 py-0 text-[14px] font-medium leading-6 text-muted-foreground transition-colors hover:bg-black/[0.06] dark:hover:bg-white/[0.08] disabled:cursor-not-allowed disabled:opacity-40; + } - .unsloth-thinking-pill[data-state="open"] { - @apply bg-muted-foreground/10; - /* See .unsloth-composer-plus: re-enable pointer-events on the open trigger. */ - pointer-events: auto; - cursor: pointer; - } + .unsloth-thinking-pill[data-active="true"], + .unsloth-thinking-pill[data-state="open"] { + background-color: rgba(0, 0, 0, 0.08); + color: var(--foreground); + /* See .unsloth-composer-plus: re-enable pointer-events on the open trigger. */ + pointer-events: auto; + cursor: pointer; + } - /* Smaller tick for selected Thinking options. */ - .unsloth-tick { - width: 0.8rem !important; - height: 0.8rem !important; - } + .dark .unsloth-thinking-pill[data-active="true"], + .dark .unsloth-thinking-pill[data-state="open"] { + background-color: rgba(255, 255, 255, 0.08); + color: var(--foreground); + } - /* Soft elevation; [data-slot] outranks the component ring-1, dropping the border. */ - .unsloth-plus-menu[data-slot] { - /* Pin radius so dark matches light (rounded-lg resolves smaller in dark). */ - border-radius: 18px; - padding-top: 0.5rem; - padding-bottom: 0.5rem; - box-shadow: - 0 1px 2px oklch(0 0 0 / 0.04), - 0 6px 18px oklch(0 0 0 / 0.08); - } + /* Smaller tick for selected Thinking options. */ + .unsloth-tick { + width: 0.8rem !important; + height: 0.8rem !important; + } - .dark .unsloth-plus-menu[data-slot] { - background-color: #2a2a2c; - /* Shadow tinted to the page bg so it blends, not a dark halo. */ - box-shadow: 0 4px 14px var(--background); - } + /* Soft elevation; [data-slot] outranks the component ring-1, dropping the border. */ + .unsloth-plus-menu[data-slot] { + /* Pin radius so dark matches light (rounded-lg resolves smaller in dark). */ + border-radius: 18px; + padding-top: 0.5rem; + padding-bottom: 0.5rem; + box-shadow: 0 1px 2px oklch(0 0 0 / 0.04), 0 6px 18px oklch(0 0 0 / 0.08); + } - /* Compact items; also applied to portaled sub-content. */ - .unsloth-plus-menu :is( - [data-slot="dropdown-menu-item"], - [data-slot="dropdown-menu-sub-trigger"] - ) { - @apply gap-3 pl-4 pr-3 py-2 text-[14px]; - cursor: pointer; - /* Pin hover-box radius so dark matches light (same as the container). */ - border-radius: 1.1rem; - } + .dark .unsloth-plus-menu[data-slot] { + background-color: #2a2a2c; + /* Shadow tinted to the page bg so it blends, not a dark halo. */ + box-shadow: 0 4px 14px var(--background); + } - .unsloth-plus-menu [data-slot="dropdown-menu-label"] { - @apply pl-4 pr-3 py-1.5 text-[12px]; - } + /* Compact items; also applied to portaled sub-content. */ + .unsloth-plus-menu + :is( + [data-slot="dropdown-menu-item"], + [data-slot="dropdown-menu-sub-trigger"] + ) { + @apply gap-3 pl-4 pr-3 py-2 text-[14px]; + cursor: pointer; + /* Pin hover-box radius so dark matches light (same as the container). */ + border-radius: 1.1rem; + } - /* Dark hover: the accent nearly matches the surface, so use a clear overlay. */ - .dark .unsloth-plus-menu :is( - [data-slot="dropdown-menu-item"], - [data-slot="dropdown-menu-sub-trigger"] - ):is(:hover, :focus, :focus-visible, [data-highlighted], [data-state="open"]) { - background-color: rgba(255, 255, 255, 0.08) !important; - } + .unsloth-plus-menu [data-slot="dropdown-menu-label"] { + @apply pl-4 pr-3 py-1.5 text-[12px]; + } - .unsloth-plus-menu :is( - [data-slot="dropdown-menu-item"], - [data-slot="dropdown-menu-sub-trigger"] - ) - svg { - width: 1.05rem; - height: 1.05rem; - } + /* Dark hover: the accent nearly matches the surface, so use a clear overlay. */ + .dark + .unsloth-plus-menu + :is( + [data-slot="dropdown-menu-item"], + [data-slot="dropdown-menu-sub-trigger"] + ):is( + :hover, + :focus, + :focus-visible, + [data-highlighted], + [data-state="open"] + ) { + background-color: rgba(255, 255, 255, 0.08) !important; + } - /* Thinking menu: tighter gap; nowrap keeps "Preserve thinking" on one line + .unsloth-plus-menu + :is( + [data-slot="dropdown-menu-item"], + [data-slot="dropdown-menu-sub-trigger"] + ) + svg { + width: 1.05rem; + height: 1.05rem; + } + + /* Thinking menu: tighter gap; nowrap keeps "Preserve thinking" on one line so the menu sizes to its content. */ - .unsloth-thinking-menu :is( - [data-slot="dropdown-menu-item"], - [data-slot="dropdown-menu-sub-trigger"] - ) { - @apply gap-1.5 pl-2.5 pr-2.5; - white-space: nowrap; - } + .unsloth-thinking-menu + :is( + [data-slot="dropdown-menu-item"], + [data-slot="dropdown-menu-sub-trigger"] + ) { + @apply gap-1.5 pl-2.5 pr-2.5; + white-space: nowrap; + } - /* Fine-tuning Studio: equal default height, expandable when needed (md+) */ - .min-h-studio-config-column { - @apply md:min-h-[470px]; - } + /* Fine-tuning Studio: equal default height, expandable when needed (md+) */ + .min-h-studio-config-column { + @apply md:min-h-[470px]; + } - .h-studio-config-column { - @apply md:h-[470px]; - } + .h-studio-config-column { + @apply md:h-[470px]; + } - [data-streamdown="unordered-list"] { - list-style-type: disc; - list-style-position: outside; - padding-left: 1.25rem; - margin-block: 0.5rem; - } + [data-streamdown="unordered-list"] { + list-style-type: disc; + list-style-position: outside; + padding-left: 1.25rem; + margin-block: 0.5rem; + } - [data-streamdown="ordered-list"] { - list-style-type: decimal; - list-style-position: outside; - padding-left: 1.25rem; - margin-block: 0.5rem; - } + [data-streamdown="ordered-list"] { + list-style-type: decimal; + list-style-position: outside; + padding-left: 1.25rem; + margin-block: 0.5rem; + } - [data-streamdown="list-item"] { - display: list-item; - } + [data-streamdown="list-item"] { + display: list-item; + } - /* Flatten code blocks: single border, language label, then code directly */ - [data-streamdown="code-block-body"] { - border: none !important; - border-radius: 0 !important; - background: transparent !important; - padding: 0 !important; - } + /* Flatten code blocks: single border, language label, then code directly */ + [data-streamdown="code-block-body"] { + border: none !important; + border-radius: 0 !important; + background: transparent !important; + padding: 0 !important; + } - [data-streamdown="code-block"] { - gap: 0.25rem; - padding: 0.75rem 1rem; - border-radius: 1.5rem; - /* Wide lines must scroll inside the thread column, not widen past the composer (flex min-width:auto). */ - max-width: 100%; - min-width: 0; - overflow-x: auto; - } + [data-streamdown="code-block"] { + gap: 0.25rem; + padding: 0.75rem 1rem; + border-radius: 1.5rem; + /* Wide lines must scroll inside the thread column, not widen past the composer (flex min-width:auto). */ + max-width: 100%; + min-width: 0; + overflow-x: auto; + } - [data-streamdown="code-block-header"] { - padding-left: 0; - } + [data-streamdown="code-block-header"] { + padding-left: 0; + } - .aui-thread-root [data-streamdown="code-block"] code > span::before { - content: none !important; - display: none !important; - margin: 0 !important; - width: 0 !important; - } + .aui-thread-root [data-streamdown="code-block"] code > span::before { + content: none !important; + display: none !important; + margin: 0 !important; + width: 0 !important; + } - /* Chat thread: code slightly smaller by default; step up when the thread column is wide. */ - .aui-thread-root [data-streamdown="code-block"] { - font-size: 0.8125rem; - line-height: 1.55; - } + /* Chat thread: code slightly smaller by default; step up when the thread column is wide. */ + .aui-thread-root [data-streamdown="code-block"] { + font-size: 0.8125rem; + line-height: 1.55; + } - .aui-thread-root [data-streamdown="code-block-header"] { - font-size: 0.6875rem; - } + .aui-thread-root [data-streamdown="code-block-header"] { + font-size: 0.6875rem; + } - @container (min-width: 36rem) { - .aui-thread-root [data-streamdown="code-block"] { - font-size: 0.875rem; - } + @container (min-width: 36rem) { + .aui-thread-root [data-streamdown="code-block"] { + font-size: 0.875rem; + } - .aui-thread-root [data-streamdown="code-block-header"] { - font-size: 0.75rem; - } - } + .aui-thread-root [data-streamdown="code-block-header"] { + font-size: 0.75rem; + } + } - /* Chat: use the app sans stack for UI + prose. */ - .aui-thread-root { - --font-heading: var(--font-sans); - font-family: var(--font-sans); - } + /* Chat: use the app sans stack for UI + prose. */ + .aui-thread-root { + --font-heading: var(--font-sans); + font-family: var(--font-sans); + } - /* Normalize the trailing margin of the last element inside an + /* Normalize the trailing margin of the last element inside an assistant message so the gap above the action bar is the same regardless of whether the response ends with a paragraph (margin-bottom: 0 by Tailwind preflight) or a streamdown block @@ -1090,16 +1194,31 @@ walks that depth without using a generic descendant `:last-child` (which would also zero last-paragraph-in-list margins). The visible gap is then driven solely by the footer's own `mt-*`. */ - .aui-assistant-message-content > *:last-child, - .aui-assistant-message-content > *:last-child > *:last-child, - .aui-assistant-message-content > *:last-child > *:last-child > *:last-child, - .aui-assistant-message-content > *:last-child > *:last-child > *:last-child > *:last-child, - .aui-assistant-message-content > *:last-child > *:last-child > *:last-child > *:last-child > *:last-child, - .aui-assistant-message-content > *:last-child > *:last-child > *:last-child > *:last-child > *:last-child > *:last-child { - margin-bottom: 0 !important; - } + .aui-assistant-message-content > *:last-child, + .aui-assistant-message-content > *:last-child > *:last-child, + .aui-assistant-message-content > *:last-child > *:last-child > *:last-child, + .aui-assistant-message-content + > *:last-child + > *:last-child + > *:last-child + > *:last-child, + .aui-assistant-message-content + > *:last-child + > *:last-child + > *:last-child + > *:last-child + > *:last-child, + .aui-assistant-message-content + > *:last-child + > *:last-child + > *:last-child + > *:last-child + > *:last-child + > *:last-child { + margin-bottom: 0 !important; + } - /* The streamdown code-block wrapper carries `my-4` (16px top + 16px + /* The streamdown code-block wrapper carries `my-4` (16px top + 16px bottom margin). The bottom margin is what stretches the gap between the code-block box and the action-bar below it on a trailing code block. We zero `margin-bottom` on every code block @@ -1113,36 +1232,42 @@ matching a text-trailing message. The wrapper's own `padding-bottom` is preserved, so the last line of code keeps its natural breathing room inside the box. */ - .aui-assistant-message-content [data-streamdown="code-block"] { - margin-bottom: 0 !important; - } + .aui-assistant-message-content [data-streamdown="code-block"] { + margin-bottom: 0 !important; + } - /* Keep monospace for code fences and inline code (not KaTeX). */ - .aui-thread-root [data-streamdown="code-block"] pre, - .aui-thread-root [data-streamdown="code-block"] code { - font-family: "Fira Code", ui-monospace, monospace; - } + /* Keep monospace for code fences and inline code (not KaTeX). */ + .aui-thread-root [data-streamdown="code-block"] pre, + .aui-thread-root [data-streamdown="code-block"] code { + font-family: "Fira Code", ui-monospace, monospace; + } - .aui-thread-root :where(p, li, td, th, blockquote, h1, h2, h3, h4, h5, h6) code { - font-family: "Fira Code", ui-monospace, monospace; - } + .aui-thread-root + :where(p, li, td, th, blockquote, h1, h2, h3, h4, h5, h6) + code { + font-family: "Fira Code", ui-monospace, monospace; + } - /* Align fenced code blocks with the main chat column even when nested in lists. */ - .aui-thread-root [data-streamdown="list-item"] > [data-streamdown="code-block"], - .aui-thread-root [data-streamdown="list-item"] [data-streamdown="code-block"] { - margin-left: -1.25rem; - width: calc(100% + 1.25rem); - max-width: calc(100% + 1.25rem); - } + /* Align fenced code blocks with the main chat column even when nested in lists. */ + .aui-thread-root + [data-streamdown="list-item"] + > [data-streamdown="code-block"], + .aui-thread-root + [data-streamdown="list-item"] + [data-streamdown="code-block"] { + margin-left: -1.25rem; + width: calc(100% + 1.25rem); + max-width: calc(100% + 1.25rem); + } - .dark .aui-thread-root [data-streamdown="code-block"] { - /* Streamdown `pre` uses `dark:bg-[var(--shiki-dark-bg,...)]`; keep one surface on the outer shell. */ - --shiki-dark-bg: transparent; - background: var(--color-code-block); - border: 1px solid oklch(1 0 0 / 0.08); - } + .dark .aui-thread-root [data-streamdown="code-block"] { + /* Streamdown `pre` uses `dark:bg-[var(--shiki-dark-bg,...)]`; keep one surface on the outer shell. */ + --shiki-dark-bg: transparent; + background: var(--color-code-block); + border: 1px solid oklch(1 0 0 / 0.08); + } - /* Streamdown code-block stability hardening. + /* Streamdown code-block stability hardening. * * Two streamdown internals cause a visible "reload"-style flicker on * trailing code blocks the moment streaming ends. Both are addressable @@ -1165,28 +1290,28 @@ * whole block at once — exactly the visual that reads as the chat * area "reloading for a frame." We disable the animation only * inside code blocks; prose token fade-in elsewhere is untouched. */ - .aui-thread-root [data-streamdown="code-block"] { - content-visibility: visible !important; - contain-intrinsic-size: none !important; - } - .aui-thread-root [data-streamdown="code-block"] [data-sd-animate] { - animation: none !important; - } + .aui-thread-root [data-streamdown="code-block"] { + content-visibility: visible !important; + contain-intrinsic-size: none !important; + } + .aui-thread-root [data-streamdown="code-block"] [data-sd-animate] { + animation: none !important; + } } /* No border line; same drop shadow as the composer (.unsloth-composer-surface). !important because Sonner injects its base rules at runtime. */ -[data-sonner-toast][data-styled='true'] { - padding: 10px 16px !important; - box-shadow: 0 2px 8px -2px rgba(27, 27, 31, 0.16) !important; - /* Pin to the light --radius so dark mode (smaller --radius) matches. */ - border-radius: 1.1rem !important; +[data-sonner-toast][data-styled="true"] { + padding: 10px 16px !important; + box-shadow: 0 2px 8px -2px rgba(27, 27, 31, 0.16) !important; + /* Pin to the light --radius so dark mode (smaller --radius) matches. */ + border-radius: 1.1rem !important; } /* Match the composer (.unsloth-composer-surface) in dark mode: same surface color, no shadow. */ -.dark [data-sonner-toast][data-styled='true'] { - background-color: #2a2a2c !important; - box-shadow: none !important; +.dark [data-sonner-toast][data-styled="true"] { + background-color: #2a2a2c !important; + box-shadow: none !important; } /* Selectable toast text; non-selectable toast buttons. */ @@ -1196,8 +1321,8 @@ [data-sonner-toast] [data-description], [data-sonner-toast] p, [data-sonner-toast] span { - -webkit-user-select: text; - user-select: text; + -webkit-user-select: text; + user-select: text; } /* Text cursor only on actual text nodes, so the toast container does @@ -1206,79 +1331,79 @@ [data-sonner-toast] [data-description], [data-sonner-toast] p, [data-sonner-toast] span { - cursor: text; + cursor: text; } [data-sonner-toast] button, [data-sonner-toast] [data-button], [data-sonner-toast] [data-cancel], [data-sonner-toast] [data-close-button] { - -webkit-user-select: none; - user-select: none; - cursor: pointer; + -webkit-user-select: none; + user-select: none; + cursor: pointer; } /* Flat scrollbar chrome */ * { - scrollbar-width: thin; - scrollbar-color: oklch(0.5 0 0 / 0.54) transparent; + scrollbar-width: thin; + scrollbar-color: oklch(0.5 0 0 / 0.54) transparent; } .dark * { - scrollbar-color: oklch(0.67 0 0 / 0.5) transparent; + scrollbar-color: oklch(0.67 0 0 / 0.5) transparent; } /* Webkit (Chrome, Safari, Edge) */ ::-webkit-scrollbar { - width: 8px; - height: 8px; - background: transparent; - border: none; - box-shadow: none; + width: 8px; + height: 8px; + background: transparent; + border: none; + box-shadow: none; } ::-webkit-scrollbar-track { - background: transparent; - border: none; - box-shadow: none; + background: transparent; + border: none; + box-shadow: none; } ::-webkit-scrollbar-track-piece { - background: transparent; - border: none; - box-shadow: none; + background: transparent; + border: none; + box-shadow: none; } ::-webkit-scrollbar-thumb { - background: oklch(0.5 0 0 / 0.54); - border-radius: 9999px; - border: none; - box-shadow: none; + background: oklch(0.5 0 0 / 0.54); + border-radius: 9999px; + border: none; + box-shadow: none; } ::-webkit-scrollbar-corner { - background: transparent; - border: none; - box-shadow: none; + background: transparent; + border: none; + box-shadow: none; } ::-webkit-scrollbar-button { - display: none; - width: 0; - height: 0; + display: none; + width: 0; + height: 0; } .dark *::-webkit-scrollbar-thumb { - background: oklch(0.67 0 0 / 0.5); + background: oklch(0.67 0 0 / 0.5); } /* Chat viewport: solid track matching sidebar so the scrollbar reads as a full-height rail flush to the right edge, without a separate decorative strip. */ .aui-thread-viewport { - scrollbar-color: oklch(0.5 0 0 / 0.54) var(--sidebar); - /* Reserve scrollbar space always so absolute-positioned overlays (topbar) + scrollbar-color: oklch(0.5 0 0 / 0.54) var(--sidebar); + /* Reserve scrollbar space always so absolute-positioned overlays (topbar) can stop flush with the gutter edge without covering the scrollbar. */ - scrollbar-gutter: stable; + scrollbar-gutter: stable; } /* Marker class applied only to actual streaming-thread viewports @@ -1288,7 +1413,7 @@ areas; the stabilizer must only attach to viewports the useIntentAwareAutoScroll hook actually drives. */ .aui-stream-viewport { - /* Scroll stabilizer: compensates for transient scrollHeight shrinks + /* Scroll stabilizer: compensates for transient scrollHeight shrinks (most visibly, shiki re-highlighting a trailing code block the instant streaming ends). The useIntentAwareAutoScroll hook sets this variable to the exact pixel amount of any content shrink @@ -1297,130 +1422,130 @@ so no jump is ever painted. Released back to 0 as content genuinely grows past its prior high-water mark, and on user detach so the bottom stays flush when they come back. */ - padding-bottom: var(--aui-scroll-stabilizer, 0px); + padding-bottom: var(--aui-scroll-stabilizer, 0px); } .dark .aui-thread-viewport { - scrollbar-color: oklch(0.72 0 0 / 0.25) #23252a; + scrollbar-color: oklch(0.72 0 0 / 0.25) #23252a; } .dark .aui-thread-viewport::-webkit-scrollbar-thumb { - background: oklch(0.72 0 0 / 0.25); + background: oklch(0.72 0 0 / 0.25); } .aui-thread-viewport::-webkit-scrollbar-track { - background: var(--sidebar); + background: var(--sidebar); } .dark .aui-thread-viewport::-webkit-scrollbar-track { - background: #23252a; + background: #23252a; } [data-sidebar="content"] { - scrollbar-color: oklch(0.5 0 0 / 0.22) var(--sidebar); + scrollbar-color: oklch(0.5 0 0 / 0.22) var(--sidebar); } .dark [data-sidebar="content"] { - scrollbar-color: oklch(0.72 0 0 / 0.25) var(--sidebar); + scrollbar-color: oklch(0.72 0 0 / 0.25) var(--sidebar); } [data-sidebar="content"]::-webkit-scrollbar-track { - background: var(--sidebar); + background: var(--sidebar); } [data-sidebar="content"]::-webkit-scrollbar-thumb { - background: oklch(0.5 0 0 / 0.22); + background: oklch(0.5 0 0 / 0.22); } .dark [data-sidebar="content"]::-webkit-scrollbar-thumb { - background: oklch(0.72 0 0 / 0.25); + background: oklch(0.72 0 0 / 0.25); } /*---break---*/ @layer base { - * { - @apply border-border outline-ring/50; - } + * { + @apply border-border outline-ring/50; + } - body { - @apply bg-background text-foreground; - } + body { + @apply bg-background text-foreground; + } } ::view-transition-old(root), ::view-transition-new(root) { - animation: none; - mix-blend-mode: normal; + animation: none; + mix-blend-mode: normal; } /* Override sonner top: 0 and pin to theme tokens (--gray2 hover ignores data-sonner-theme). */ [data-sonner-toast][data-styled="true"] [data-close-button] { - top: 8px !important; - background: var(--popover) !important; - color: var(--popover-foreground) !important; - border-color: transparent !important; + top: 8px !important; + background: var(--popover) !important; + color: var(--popover-foreground) !important; + border-color: transparent !important; } /* Keep the (borderless) close button blended with the dark toast surface. */ .dark [data-sonner-toast][data-styled="true"] [data-close-button] { - background: #2a2a2c !important; + background: #2a2a2c !important; } [data-sonner-toast][data-styled="true"] [data-close-button] svg { - stroke-width: 2.25; + stroke-width: 2.25; } [data-sonner-toast][data-styled="true"]:hover [data-close-button]:hover { - background: var(--muted) !important; - color: var(--popover-foreground) !important; - border-color: transparent !important; + background: var(--muted) !important; + color: var(--popover-foreground) !important; + border-color: transparent !important; } .generated-image-loading-card { - position: relative; - overflow: hidden; - contain: paint; + position: relative; + overflow: hidden; + contain: paint; } .generated-image-loading-wave { - position: relative; - display: grid; - grid-template-columns: repeat(8, minmax(0, 1fr)); - gap: 14px; - width: min(66%, 18rem); - padding: 1.5rem; - border-radius: 1.5rem; + position: relative; + display: grid; + grid-template-columns: repeat(8, minmax(0, 1fr)); + gap: 14px; + width: min(66%, 18rem); + padding: 1.5rem; + border-radius: 1.5rem; } .generated-image-loading-dot { - width: 7px; - height: 7px; - border-radius: 9999px; - background: color-mix(in oklch, var(--muted-foreground) 82%, var(--primary)); - opacity: 0.12; - transform: translate3d(0, 4px, 0) scale(0.72); - animation: generated-image-dot-wave 1850ms var(--ease-out-quart) infinite; - animation-delay: calc((var(--dot-row) * 72ms) + (var(--dot-col) * 72ms)); - will-change: transform, opacity; + width: 7px; + height: 7px; + border-radius: 9999px; + background: color-mix(in oklch, var(--muted-foreground) 82%, var(--primary)); + opacity: 0.12; + transform: translate3d(0, 4px, 0) scale(0.72); + animation: generated-image-dot-wave 1850ms var(--ease-out-quart) infinite; + animation-delay: calc((var(--dot-row) * 72ms) + (var(--dot-col) * 72ms)); + will-change: transform, opacity; } @keyframes generated-image-dot-wave { - 0%, - 22%, - 100% { - opacity: 0.1; - transform: translate3d(0, 4px, 0) scale(0.72); - } + 0%, + 22%, + 100% { + opacity: 0.1; + transform: translate3d(0, 4px, 0) scale(0.72); + } - 46% { - opacity: 0.46; - transform: translate3d(0, -3px, 0) scale(0.96); - } + 46% { + opacity: 0.46; + transform: translate3d(0, -3px, 0) scale(0.96); + } - 66% { - opacity: 0.2; - transform: translate3d(0, 0, 0) scale(0.82); - } + 66% { + opacity: 0.2; + transform: translate3d(0, 0, 0) scale(0.82); + } } /* @@ -1439,22 +1564,22 @@ * so they keep animating. */ @media (prefers-reduced-motion: reduce) { - *, - *::before, - *::after { - animation-duration: 0.01ms !important; - animation-iteration-count: 1 !important; - transition-duration: 0.01ms !important; - scroll-behavior: auto !important; - } + *, + *::before, + *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + scroll-behavior: auto !important; + } - .animate-spin { - animation-duration: 1.5s !important; - animation-iteration-count: infinite !important; - } + .animate-spin { + animation-duration: 1.5s !important; + animation-iteration-count: infinite !important; + } - .generated-image-loading-dot { - animation-duration: 1850ms !important; - animation-iteration-count: infinite !important; - } + .generated-image-loading-dot { + animation-duration: 1850ms !important; + animation-iteration-count: infinite !important; + } } From f7b92e5f111a8dcbc15e2986be602fd3e825bf6f Mon Sep 17 00:00:00 2001 From: wasimysaid Date: Sat, 30 May 2026 20:21:21 +0200 Subject: [PATCH 07/17] feat(chat): update single composer tools --- .../src/components/assistant-ui/thread.tsx | 274 ++++++++++++------ studio/frontend/src/features/chat/index.ts | 6 + 2 files changed, 197 insertions(+), 83 deletions(-) diff --git a/studio/frontend/src/components/assistant-ui/thread.tsx b/studio/frontend/src/components/assistant-ui/thread.tsx index ddde7990a2..52ba313d74 100644 --- a/studio/frontend/src/components/assistant-ui/thread.tsx +++ b/studio/frontend/src/components/assistant-ui/thread.tsx @@ -44,13 +44,15 @@ import { DropdownMenuSubTrigger, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; -import { sentAudioNames } from "@/features/chat/api/chat-adapter"; -import { parseExternalModelId } from "@/features/chat/external-providers"; -import { getExternalReasoningCapabilities } from "@/features/chat/provider-capabilities"; -import { useChatRuntimeStore } from "@/features/chat/stores/chat-runtime-store"; -import { useExternalProvidersStore } from "@/features/chat/stores/external-providers-store"; -import { deleteThreadMessage } from "@/features/chat/utils/delete-thread-message"; -import { applyQwenThinkingParams } from "@/features/chat/utils/qwen-params"; +import { + applyQwenThinkingParams, + deleteThreadMessage, + getExternalReasoningCapabilities, + parseExternalModelId, + sentAudioNames, + useChatRuntimeStore, + useExternalProvidersStore, +} from "@/features/chat"; import { isTauri } from "@/lib/api-base"; import { AUDIO_ACCEPT, MAX_AUDIO_SIZE, fileToBase64 } from "@/lib/audio-utils"; import { copyToClipboard } from "@/lib/copy-to-clipboard"; @@ -137,7 +139,10 @@ export const Thread: FC<{ const threadId = targetThreadId ?? activeThreadId ?? null; return ( - + thread.isEmpty && !thread.isLoading} > - + )} @@ -363,20 +371,19 @@ const ThreadScrollToBottom: FC = () => { ); }; +function getWelcomeEmoji(): string { + const hour = new Date().getHours(); + if (hour >= 6 && hour < 12) return "large sloth drink.png"; + if (hour >= 12 && hour < 17) return "sloth magnify final.png"; + if (hour >= 17 && hour < 21) return "sloth shy large.png"; + return "unsloth-gem.png"; +} + const ThreadWelcome: FC<{ hideComposer?: boolean; threadId?: string | null; }> = ({ hideComposer, threadId }) => { - const [currentEmoji, setCurrentEmoji] = useState("large sloth drink.png"); - - useEffect(() => { - const hour = new Date().getHours(); - if (hour >= 6 && hour < 12) setCurrentEmoji("large sloth drink.png"); - else if (hour >= 12 && hour < 17) - setCurrentEmoji("sloth magnify final.png"); - else if (hour >= 17 && hour < 21) setCurrentEmoji("sloth shy large.png"); - else setCurrentEmoji("unsloth-gem.png"); - }, []); + const [currentEmoji] = useState(getWelcomeEmoji); const currentEmojiSrc = currentEmoji === "unsloth-gem.png" @@ -406,7 +413,7 @@ const ComposerAnimated: FC<{ menuSide?: "top" | "bottom"; }> = ({ disabled, threadId, menuSide }) => { return ( -
+
@@ -451,6 +458,9 @@ const Composer: FC<{ const toolsEnabled = useChatRuntimeStore((s) => s.toolsEnabled); const codeToolsEnabled = useChatRuntimeStore((s) => s.codeToolsEnabled); const imageToolsEnabled = useChatRuntimeStore((s) => s.imageToolsEnabled); + const webFetchToolsEnabled = useChatRuntimeStore( + (s) => s.webFetchToolsEnabled, + ); const activeThreadId = useChatRuntimeStore((s) => s.activeThreadId); const setPendingImageEditReference = useChatRuntimeStore( (s) => s.setPendingImageEditReference, @@ -463,20 +473,23 @@ const Composer: FC<{ const inputRef = useRef(null); const [isMultiline, setIsMultiline] = useState(false); useEffect(() => { - if (composerText.length === 0) { - setIsMultiline(false); - return; - } - const el = inputRef.current; - if (!el) { - return; - } - const cs = getComputedStyle(el); - const lineHeight = Number.parseFloat(cs.lineHeight) || 24; - const padTop = Number.parseFloat(cs.paddingTop) || 0; - const padBottom = Number.parseFloat(cs.paddingBottom) || 0; - const contentHeight = el.scrollHeight - padTop - padBottom; - setIsMultiline((prev) => prev || contentHeight > lineHeight * 1.5); + const frame = window.requestAnimationFrame(() => { + if (composerText.length === 0) { + setIsMultiline(false); + return; + } + const el = inputRef.current; + if (!el) { + return; + } + const cs = getComputedStyle(el); + const lineHeight = Number.parseFloat(cs.lineHeight) || 24; + const padTop = Number.parseFloat(cs.paddingTop) || 0; + const padBottom = Number.parseFloat(cs.paddingBottom) || 0; + const contentHeight = el.scrollHeight - padTop - padBottom; + setIsMultiline((prev) => prev || contentHeight > lineHeight * 1.5); + }); + return () => window.cancelAnimationFrame(frame); }, [composerText]); const hasAttachments = useAuiState( ({ composer }) => composer.attachments.length > 0, @@ -499,7 +512,8 @@ const Composer: FC<{ hasPendingAudio || toolsEnabled || codeToolsEnabled || - imageToolsEnabled; + imageToolsEnabled || + webFetchToolsEnabled; // react-textarea-autosize re-measures only on value change or window resize, // not on the width swap from expanding, so it keeps the taller height and // leaves a stray blank row. Nudge a resize whenever the input width changes. @@ -622,9 +636,10 @@ const Composer: FC<{ {composerExpanded ? ( <> - - - + {toolsEnabled ? : null} + {codeToolsEnabled ? : null} + {imageToolsEnabled ? : null} + {webFetchToolsEnabled ? : null} ) : null}
@@ -645,12 +660,8 @@ const Composer: FC<{ {...inputProps} /> @@ -1221,6 +1232,7 @@ const WebSearchToggle: FC = () => { > Search + ); }; @@ -1242,7 +1254,8 @@ const CodeToolsToggle: FC = () => { const setCodeToolsEnabled = useChatRuntimeStore((s) => s.setCodeToolsEnabled); // Disable only when a loaded model lacks the capability; with no model the // tool can still be pre-selected and reflected, matching the + menu. - const disabled = modelLoaded && !(supportsTools || supportsBuiltinCodeExecution); + const disabled = + modelLoaded && !(supportsTools || supportsBuiltinCodeExecution); return ( ); }; @@ -1269,10 +1283,6 @@ const ImagesToggle: FC = () => { const modelLoaded = useChatRuntimeStore( (s) => !!s.params.checkpoint && !s.modelLoading, ); - // OpenAI cloud Responses-API models advertise image_generation as a - // server-side tool; no local runtime fallback exists. Mirror of - // shared-composer's imageDisabled / showImagePill so the in-thread - // composer surfaces the same control as the empty-state composer. const supportsBuiltinImageGeneration = useChatRuntimeStore( (s) => s.supportsBuiltinImageGeneration, ); @@ -1280,10 +1290,14 @@ const ImagesToggle: FC = () => { const setImageToolsEnabled = useChatRuntimeStore( (s) => s.setImageToolsEnabled, ); - if (!supportsBuiltinImageGeneration) { + + if (!imageToolsEnabled) { return null; } - const disabled = !modelLoaded; + + // Disable only when a loaded model lacks the capability; before a model is + // loaded, preserve the existing pre-selected-pill behavior used by Search/Code. + const disabled = modelLoaded && !supportsBuiltinImageGeneration; return ( + ); +}; + +const WebFetchToggle: FC = () => { + const modelLoaded = useChatRuntimeStore( + (s) => !!s.params.checkpoint && !s.modelLoading, + ); + const supportsBuiltinWebFetch = useChatRuntimeStore( + (s) => s.supportsBuiltinWebFetch, + ); + const webFetchToolsEnabled = useChatRuntimeStore( + (s) => s.webFetchToolsEnabled, + ); + const setWebFetchToolsEnabled = useChatRuntimeStore( + (s) => s.setWebFetchToolsEnabled, + ); + + if (!webFetchToolsEnabled) { + return null; + } + + // Disable only when a loaded model lacks the capability; before a model is + // loaded, preserve the existing pre-selected-pill behavior used by Search/Code. + const disabled = modelLoaded && !supportsBuiltinWebFetch; + return ( + ); }; @@ -1315,15 +1369,16 @@ const ToolStatusDisplay: FC = () => { }, [visible]); useEffect(() => { - if (!toolStatus) { + const resetFrame = window.requestAnimationFrame(() => { setElapsed(0); - if (!isThreadRunning) { + if (!toolStatus && !isThreadRunning) { setVisible(false); } - return; - } + }); - setElapsed(0); + if (!toolStatus) { + return () => window.cancelAnimationFrame(resetFrame); + } // Debounce badge visibility by 300ms when the badge is not // already on screen. Once visible from a prior tool, consecutive @@ -1338,6 +1393,7 @@ const ToolStatusDisplay: FC = () => { setElapsed((prev) => prev + 1); }, 1000); return () => { + window.cancelAnimationFrame(resetFrame); clearInterval(interval); if (showTimer) { clearTimeout(showTimer); @@ -1376,6 +1432,29 @@ const ComposerToolsMenu: FC<{ side?: "top" | "bottom" }> = ({ const setToolsEnabled = useChatRuntimeStore((s) => s.setToolsEnabled); const codeToolsEnabled = useChatRuntimeStore((s) => s.codeToolsEnabled); const setCodeToolsEnabled = useChatRuntimeStore((s) => s.setCodeToolsEnabled); + const modelLoaded = useChatRuntimeStore( + (s) => !!s.params.checkpoint && !s.modelLoading, + ); + const supportsBuiltinImageGeneration = useChatRuntimeStore( + (s) => s.supportsBuiltinImageGeneration, + ); + const imageToolsEnabled = useChatRuntimeStore((s) => s.imageToolsEnabled); + const setImageToolsEnabled = useChatRuntimeStore( + (s) => s.setImageToolsEnabled, + ); + const supportsBuiltinWebFetch = useChatRuntimeStore( + (s) => s.supportsBuiltinWebFetch, + ); + const webFetchToolsEnabled = useChatRuntimeStore( + (s) => s.webFetchToolsEnabled, + ); + const setWebFetchToolsEnabled = useChatRuntimeStore( + (s) => s.setWebFetchToolsEnabled, + ); + const showImageMenuItem = supportsBuiltinImageGeneration || imageToolsEnabled; + const showFetchMenuItem = supportsBuiltinWebFetch || webFetchToolsEnabled; + const imageMenuDisabled = modelLoaded && !supportsBuiltinImageGeneration; + const fetchMenuDisabled = modelLoaded && !supportsBuiltinWebFetch; const startCompare = useCallback(() => { const store = useChatRuntimeStore.getState(); @@ -1397,7 +1476,7 @@ const ComposerToolsMenu: FC<{ side?: "top" | "bottom" }> = ({ aria-label="Tools and attachments" className="unsloth-composer-plus" > - + = ({ Code {codeToolsEnabled ? : null} + {showImageMenuItem ? ( + setImageToolsEnabled(!imageToolsEnabled)} + > + + Images + {imageToolsEnabled ? : null} + + ) : null} + {showFetchMenuItem ? ( + setWebFetchToolsEnabled(!webFetchToolsEnabled)} + > + + Fetch + {webFetchToolsEnabled ? : null} + + ) : null} setSettingsPanelOpen(true)}> MCP @@ -1498,9 +1603,10 @@ const ComposerToolsMenu: FC<{ side?: "top" | "bottom" }> = ({ const ComposerRightControls: FC<{ disabled?: boolean; + showSend?: boolean; shouldBlockSend?: () => boolean; menuSide?: "top" | "bottom"; -}> = ({ disabled, shouldBlockSend, menuSide }) => { +}> = ({ disabled, showSend, shouldBlockSend, menuSide }) => { return (
@@ -1510,9 +1616,9 @@ const ComposerRightControls: FC<{ tooltip="Dictate" aria-label="Dictate" variant="ghost" - className="size-9 rounded-full text-foreground" + className="size-8 rounded-full text-foreground" > - + @@ -1522,40 +1628,42 @@ const ComposerRightControls: FC<{ tooltip="Stop dictation" aria-label="Stop dictation" variant="ghost" - className="size-9 rounded-full text-destructive" + className="size-8 rounded-full text-destructive" > - !thread.isRunning}> - - { - if (shouldBlockSend?.()) { - event.preventDefault(); - } - }} - className="aui-composer-send size-9 rounded-full" - aria-label="Send message" - > - - - - + {showSend ? ( + !thread.isRunning}> + + { + if (shouldBlockSend?.()) { + event.preventDefault(); + } + }} + className="aui-composer-send size-8 rounded-full disabled:bg-transparent disabled:text-foreground/40 disabled:opacity-100 disabled:pointer-events-none" + aria-label="Send message" + > + + + + + ) : null} thread.isRunning}>
-
{composer}
+
{composer}

LLMs can make mistakes. Double-check responses.

@@ -335,15 +335,17 @@ const LoraCompareContent = memo(function LoraCompareContent({ useEffect(() => { let isActive = true; - listStoredChatThreads({ pairId }).then((threads) => { - if (!isActive) return; - setBaseThreadId(threads.find((t) => t.modelType === "base")?.id); - setLoraThreadId(threads.find((t) => t.modelType === "lora")?.id); - }).catch((error) => { - if (!isExpectedBackgroundChatStorageError(error)) { - throw error; - } - }); + listStoredChatThreads({ pairId }) + .then((threads) => { + if (!isActive) return; + setBaseThreadId(threads.find((t) => t.modelType === "base")?.id); + setLoraThreadId(threads.find((t) => t.modelType === "lora")?.id); + }) + .catch((error) => { + if (!isExpectedBackgroundChatStorageError(error)) { + throw error; + } + }); return () => { isActive = false; }; @@ -353,10 +355,7 @@ const LoraCompareContent = memo(function LoraCompareContent({ + } > <> @@ -491,21 +490,25 @@ const GeneralCompareContent = memo(function GeneralCompareContent({ useEffect(() => { let isActive = true; - listStoredChatThreads({ pairId }).then((threads) => { - if (!isActive) return; - setModel1ThreadId( - threads.find((t) => t.modelType === "model1" || t.modelType === "base") - ?.id, - ); - setModel2ThreadId( - threads.find((t) => t.modelType === "model2" || t.modelType === "lora") - ?.id, - ); - }).catch((error) => { - if (!isExpectedBackgroundChatStorageError(error)) { - throw error; - } - }); + listStoredChatThreads({ pairId }) + .then((threads) => { + if (!isActive) return; + setModel1ThreadId( + threads.find( + (t) => t.modelType === "model1" || t.modelType === "base", + )?.id, + ); + setModel2ThreadId( + threads.find( + (t) => t.modelType === "model2" || t.modelType === "lora", + )?.id, + ); + }) + .catch((error) => { + if (!isExpectedBackgroundChatStorageError(error)) { + throw error; + } + }); return () => { isActive = false; }; @@ -659,8 +662,7 @@ export function ChatPage(): ReactElement { } = useChatModelRuntime(); const prevConnectionsEnabledRef = useRef(connectionsEnabled); useEffect(() => { - const turnedOff = - prevConnectionsEnabledRef.current && !connectionsEnabled; + const turnedOff = prevConnectionsEnabledRef.current && !connectionsEnabled; if (!connectionsEnabled && isExternalModelId(inferenceParams.checkpoint)) { clearCheckpoint(); if (turnedOff) { @@ -670,11 +672,7 @@ export function ChatPage(): ReactElement { } } prevConnectionsEnabledRef.current = connectionsEnabled; - }, [ - clearCheckpoint, - connectionsEnabled, - inferenceParams.checkpoint, - ]); + }, [clearCheckpoint, connectionsEnabled, inferenceParams.checkpoint]); const pendingNativeModelIntent = useNativeIntentStore( (state) => state.pendingModelIntent, ); @@ -693,17 +691,19 @@ export function ChatPage(): ReactElement { const reasoningEnabled = useChatRuntimeStore((s) => s.reasoningEnabled); const reasoningStyle = useChatRuntimeStore((s) => s.reasoningStyle); const reasoningEffort = useChatRuntimeStore((s) => s.reasoningEffort); - const supportsReasoningOff = useChatRuntimeStore((s) => s.supportsReasoningOff); + const supportsReasoningOff = useChatRuntimeStore( + (s) => s.supportsReasoningOff, + ); const activeExternalProvider = useMemo(() => { const selection = parseExternalModelId(inferenceParams.checkpoint); if (!selection) return null; return ( - externalProvidersForChat.find( - (p) => p.id === selection.providerId, - ) ?? null + externalProvidersForChat.find((p) => p.id === selection.providerId) ?? + null ); }, [externalProvidersForChat, inferenceParams.checkpoint]); - const activeExternalProviderType = activeExternalProvider?.providerType ?? null; + const activeExternalProviderType = + activeExternalProvider?.providerType ?? null; const activeProviderCapabilities = useMemo(() => { const selection = parseExternalModelId(inferenceParams.checkpoint); if (!selection) return null; @@ -819,7 +819,9 @@ export function ChatPage(): ReactElement { (provider?.providerType === "anthropic" || provider?.providerType === "openai"); const storedToolsEnabled = loadOptionalBool(CHAT_TOOLS_ENABLED_KEY); - const storedCodeToolsEnabled = loadOptionalBool(CHAT_CODE_TOOLS_ENABLED_KEY); + const storedCodeToolsEnabled = loadOptionalBool( + CHAT_CODE_TOOLS_ENABLED_KEY, + ); const storedImageToolsEnabled = loadOptionalBool( CHAT_IMAGE_TOOLS_ENABLED_KEY, ); @@ -983,8 +985,7 @@ export function ChatPage(): ReactElement { selectedProvider?.providerType, selectedExternal?.modelId, { - isReasoningProvider: - selectedProvider?.isReasoningModel === true, + isReasoningProvider: selectedProvider?.isReasoningModel === true, baseUrl: selectedProvider?.baseUrl ?? null, }, ); @@ -1030,11 +1031,12 @@ export function ChatPage(): ReactElement { selectedExternal?.modelId, selectedProvider?.baseUrl, ); - const supportsBuiltinCodeExecution = providerSupportsBuiltinCodeExecution( - selectedProvider?.providerType, - selectedExternal?.modelId, - selectedProvider?.baseUrl, - ); + const supportsBuiltinCodeExecution = + providerSupportsBuiltinCodeExecution( + selectedProvider?.providerType, + selectedExternal?.modelId, + selectedProvider?.baseUrl, + ); const supportsBuiltinImageGeneration = providerSupportsBuiltinImageGeneration( selectedProvider?.providerType, @@ -1231,8 +1233,7 @@ export function ChatPage(): ReactElement { if (!usage) return; const store = useChatRuntimeStore.getState(); const activeCheckpoint = store.params.checkpoint; - const usageModelId = - (usage as { modelId?: unknown }).modelId; + const usageModelId = (usage as { modelId?: unknown }).modelId; // Scope by modelId when present; reject if no active checkpoint // (model-scoped usage cannot be attributed to "nothing"). if (typeof usageModelId === "string" && usageModelId) { diff --git a/studio/frontend/src/features/chat/shared-composer.tsx b/studio/frontend/src/features/chat/shared-composer.tsx index c6b36c6f9e..e9cf589f32 100644 --- a/studio/frontend/src/features/chat/shared-composer.tsx +++ b/studio/frontend/src/features/chat/shared-composer.tsx @@ -21,7 +21,7 @@ import { DropdownMenuSubTrigger, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; -import { applyQwenThinkingParams } from "@/features/chat/utils/qwen-params"; +import { applyQwenThinkingParams } from "@/features/chat"; import { AUDIO_ACCEPT, MAX_AUDIO_SIZE, fileToBase64 } from "@/lib/audio-utils"; import { isTauri } from "@/lib/api-base"; import { isMultimodalResponse } from "./types/api"; @@ -55,7 +55,10 @@ import { useNavigate } from "@tanstack/react-router"; import { HugeiconsIcon } from "@hugeicons/react"; import { toast } from "@/lib/toast"; import { loadModel, validateModel } from "./api/chat-api"; -import { parseExternalModelId, providerTypeSupportsVision } from "./external-providers"; +import { + parseExternalModelId, + providerTypeSupportsVision, +} from "./external-providers"; import { useExternalProvidersStore } from "./stores/external-providers-store"; import { type ReasoningEffort, @@ -78,6 +81,7 @@ import { useCallback, useContext, useEffect, + useMemo, useRef, useState, } from "react"; @@ -166,7 +170,10 @@ function fileToBase64DataURL(file: File): Promise { }); } -function formatReasoningEffortLabel(level: ReasoningEffort, modelId?: string): string { +function formatReasoningEffortLabel( + level: ReasoningEffort, + modelId?: string, +): string { if (level === "max") return "Max"; if (level === "xhigh") { const normalized = modelId?.trim().toLowerCase() ?? ""; @@ -202,7 +209,12 @@ function useDictation( const start = useCallback(() => { const SpeechRecognitionAPI = typeof window !== "undefined" && - (window.SpeechRecognition ?? (window as unknown as { webkitSpeechRecognition?: typeof SpeechRecognition }).webkitSpeechRecognition); + (window.SpeechRecognition ?? + ( + window as unknown as { + webkitSpeechRecognition?: typeof SpeechRecognition; + } + ).webkitSpeechRecognition); if (!SpeechRecognitionAPI) { return; } @@ -248,7 +260,11 @@ function useDictation( const supported = typeof window !== "undefined" && - !!(window.SpeechRecognition ?? (window as unknown as { webkitSpeechRecognition?: unknown }).webkitSpeechRecognition); + !!( + window.SpeechRecognition ?? + (window as unknown as { webkitSpeechRecognition?: unknown }) + .webkitSpeechRecognition + ); return { isDictating, start, stop, supported }; } @@ -287,9 +303,16 @@ export function RegisterCompareHandle({ currentHandles[name] = { // fixes occasional reorder on reload. append: (content) => - aui.thread().append({ role: "user", content, createdAt: new Date() } as never), + aui + .thread() + .append({ role: "user", content, createdAt: new Date() } as never), appendMessage: (content) => - aui.thread().append({ role: "user", content, createdAt: new Date(), startRun: false } as never), + aui.thread().append({ + role: "user", + content, + createdAt: new Date(), + startRun: false, + } as never), startRun: () => { const msgs = aui.thread().getState().messages; const lastId = msgs.length > 0 ? msgs[msgs.length - 1].id : null; @@ -327,13 +350,10 @@ function PendingImageThumb({ file: File; onRemove: () => void; }): ReactElement { - const [src, setSrc] = useState(null); + const src = useMemo(() => URL.createObjectURL(file), [file]); useEffect(() => { - const url = URL.createObjectURL(file); - setSrc(url); - return () => URL.revokeObjectURL(url); - }, [file]); - if (!src) return
; + return () => URL.revokeObjectURL(src); + }, [src]); return (
{file.name} @@ -383,7 +403,10 @@ export function SharedComposer({ const [running, setRunning] = useState(false); const [comparing, setComparing] = useState(false); const [pendingImages, setPendingImages] = useState([]); - const [pendingAudio, setPendingAudio] = useState<{ name: string; base64: string } | null>(null); + const [pendingAudio, setPendingAudio] = useState<{ + name: string; + base64: string; + } | null>(null); const [dragging, setDragging] = useState(false); const [isComposing, setIsComposing] = useState(false); const textareaRef = useRef(null); @@ -412,10 +435,16 @@ export function SharedComposer({ const setReasoningEnabled = useChatRuntimeStore((s) => s.setReasoningEnabled); const reasoningStyle = useChatRuntimeStore((s) => s.reasoningStyle); const reasoningEffort = useChatRuntimeStore((s) => s.reasoningEffort); - const supportsReasoningOff = useChatRuntimeStore((s) => s.supportsReasoningOff); - const reasoningEffortLevels = useChatRuntimeStore((s) => s.reasoningEffortLevels); + const supportsReasoningOff = useChatRuntimeStore( + (s) => s.supportsReasoningOff, + ); + const reasoningEffortLevels = useChatRuntimeStore( + (s) => s.reasoningEffortLevels, + ); const setReasoningEffort = useChatRuntimeStore((s) => s.setReasoningEffort); - const supportsPreserveThinking = useChatRuntimeStore((s) => s.supportsPreserveThinking); + const supportsPreserveThinking = useChatRuntimeStore( + (s) => s.supportsPreserveThinking, + ); const preserveThinking = useChatRuntimeStore((s) => s.preserveThinking); const setPreserveThinking = useChatRuntimeStore((s) => s.setPreserveThinking); const supportsTools = useChatRuntimeStore((s) => s.supportsTools); @@ -510,7 +539,8 @@ export function SharedComposer({ effectiveSupportsReasoning || effectiveReasoningAlwaysOn; const isEffort = effectiveReasoningStyle === "reasoning_effort"; const thinkingActiveLook = isEffort - ? reasoningLockedOn || (effectiveReasoningVisualEnabled && !reasoningDisabled) + ? reasoningLockedOn || + (effectiveReasoningVisualEnabled && !reasoningDisabled) : reasoningLockedOn || (effectiveReasoningEnabled && !reasoningDisabled); // Two-pill gating: Search pill lights up when the runtime has either // a local tool runtime (supportsTools, gives us our Code/python + local @@ -540,7 +570,7 @@ export function SharedComposer({ // allowance, so we only disable Code unconditionally in Gemini // image mode. const isExternalGemini = selectedExternalProvider?.providerType === "gemini"; - const imageDisabled = !modelLoaded || !supportsBuiltinImageGeneration; + const imageDisabled = modelLoaded && !supportsBuiltinImageGeneration; const imageModeDisablesCode = isExternalGemini && imageToolsEnabled && !imageDisabled; // Image-tier Gemini models always reject codeExecution and reject @@ -549,8 +579,7 @@ export function SharedComposer({ // runtime flag re-enable a pill the Gemini backend will silently // drop. Detect "external provider is Gemini AND model is image-tier" // and gate strictly on the provider builtin support. - const isGeminiImageTier = - isExternalGemini && supportsBuiltinImageGeneration; + const isGeminiImageTier = isExternalGemini && supportsBuiltinImageGeneration; // Disable only when a loaded model lacks the capability; with no model the // tool can still be pre-selected and reflected, matching the + menu. const searchDisabled = @@ -564,22 +593,24 @@ export function SharedComposer({ ? true : !(supportsTools || supportsBuiltinCodeExecution))) || imageModeDisablesCode; - // Images pill is only ever lit on OpenAI cloud's Responses-API models - // and Gemini Nano Banana family. No local tool runtime fallback. - const showImagePill = supportsBuiltinImageGeneration; + // Images pill is only visible when selected. Its menu item appears when the + // provider supports it or when a persisted selected state needs to be shown/toggled. + const showImageMenuItem = supportsBuiltinImageGeneration || imageToolsEnabled; // Fetch pill: Anthropic-only (web_fetch_20250910 / web_fetch_20260209). - const webFetchDisabled = !modelLoaded || !supportsBuiltinWebFetch; - const showWebFetchPill = supportsBuiltinWebFetch; - // Backwards-compatible alias for any other call site that may still - // reference `toolsDisabled` (rare; both pills used it before). - const toolsDisabled = codeDisabled; + const webFetchDisabled = modelLoaded && !supportsBuiltinWebFetch; + const showFetchMenuItem = supportsBuiltinWebFetch || webFetchToolsEnabled; const setPendingAudioStore = useChatRuntimeStore((s) => s.setPendingAudio); - const clearPendingAudioStore = useChatRuntimeStore((s) => s.clearPendingAudio); - - const { isDictating, start: startDictation, stop: stopDictation, supported: dictationSupported } = useDictation( - setText, + const clearPendingAudioStore = useChatRuntimeStore( + (s) => s.clearPendingAudio, ); + const { + isDictating, + start: startDictation, + stop: stopDictation, + supported: dictationSupported, + } = useDictation(setText); + useEffect(() => { const id = setInterval(() => { const handles = handlesRef.current; @@ -596,15 +627,17 @@ export function SharedComposer({ ta.style.height = "auto"; const styles = window.getComputedStyle(ta); const lineHeight = parseFloat(styles.lineHeight) || 20; - const paddingY = parseFloat(styles.paddingTop) + parseFloat(styles.paddingBottom); - const borderY = parseFloat(styles.borderTopWidth) + parseFloat(styles.borderBottomWidth); + const paddingY = + parseFloat(styles.paddingTop) + parseFloat(styles.paddingBottom); + const borderY = + parseFloat(styles.borderTopWidth) + parseFloat(styles.borderBottomWidth); const maxHeight = lineHeight * 6 + paddingY + borderY; const next = Math.min(ta.scrollHeight, maxHeight); ta.style.height = `${next}px`; ta.style.overflowY = ta.scrollHeight > maxHeight ? "auto" : "hidden"; }, [text]); - const addFiles = useCallback((files: FileList | null) => { + function addFiles(files: FileList | null) { if (!files?.length) return; const next: PendingImage[] = []; let droppedImageForUnavailable = false; @@ -632,7 +665,7 @@ export function SharedComposer({ toast.error(attachUnavailableReason); } setPendingImages((prev) => [...prev, ...next]); - }, [setPendingAudioStore, attachUnavailableReason]); + } const removePendingImage = useCallback((id: string) => { setPendingImages((prev) => prev.filter((p) => p.id !== id)); @@ -690,12 +723,17 @@ export function SharedComposer({ // LoraCompare and single-pane chats are unaffected. if (hasCompareHandles && !isGeneralizedCompare) { toast.error("Pick a model in each pane to compare", { - description: "Use the model dropdown above each pane, then send your prompt.", + description: + "Use the model dropdown above each pane, then send your prompt.", }); return; } - if (pendingImages.length > 0 && !isGeneralizedCompare && imageUnavailableReason) { + if ( + pendingImages.length > 0 && + !isGeneralizedCompare && + imageUnavailableReason + ) { // Single mode: the loaded model's runtime capability is known // here. Compare mode defers — each ensureModelLoaded below sets // loadedIsMultimodal for its side, and the chat-adapter's @@ -733,8 +771,9 @@ export function SharedComposer({ const maxSeqLength = store.params.maxSeqLength; const trustRemoteCode = store.params.trustRemoteCode ?? false; const chatTemplateOverride = store.chatTemplateOverride; - const effectiveChatTemplateOverride = - chatTemplateOverride?.trim() ? chatTemplateOverride : null; + const effectiveChatTemplateOverride = chatTemplateOverride?.trim() + ? chatTemplateOverride + : null; function modelDisplayName(id: string): string { const parts = id.split("/"); @@ -742,11 +781,14 @@ export function SharedComposer({ } // Helper: load a model and update store checkpoint - async function ensureModelLoaded(sel: CompareModelSelection): Promise { + async function ensureModelLoaded( + sel: CompareModelSelection, + ): Promise { const currentStore = useChatRuntimeStore.getState(); const isAlreadyActive = currentStore.params.checkpoint === sel.id && - (currentStore.activeGgufVariant ?? null) === (sel.ggufVariant ?? null); + (currentStore.activeGgufVariant ?? null) === + (sel.ggufVariant ?? null); if (!isAlreadyActive) { const validation = await validateModel({ model_path: sel.id, @@ -836,9 +878,17 @@ export function SharedComposer({ try { // Side 1: load → generate → wait if (handle1 && model1?.id) { - toast("Loading Model 1…", { id: toastId, description: name1, duration: Infinity }); + toast("Loading Model 1…", { + id: toastId, + description: name1, + duration: Infinity, + }); const status1 = await ensureModelLoaded(model1); - toast("Generating with Model 1…", { id: toastId, description: `${name1} (${status1})`, duration: Infinity }); + toast("Generating with Model 1…", { + id: toastId, + description: `${name1} (${status1})`, + duration: Infinity, + }); const done = handle1.waitForRunEnd(); handle1.startRun(); await done; @@ -846,13 +896,22 @@ export function SharedComposer({ // Side 2: load → generate → wait if (handle2 && model2?.id) { - const needsLoad = model2.id.toLowerCase() !== (model1?.id || "").toLowerCase() - || (model2.ggufVariant ?? "") !== (model1?.ggufVariant ?? ""); + const needsLoad = + model2.id.toLowerCase() !== (model1?.id || "").toLowerCase() || + (model2.ggufVariant ?? "") !== (model1?.ggufVariant ?? ""); if (needsLoad) { - toast("Loading Model 2…", { id: toastId, description: name2, duration: Infinity }); + toast("Loading Model 2…", { + id: toastId, + description: name2, + duration: Infinity, + }); } const status2 = await ensureModelLoaded(model2); - toast("Generating with Model 2…", { id: toastId, description: `${name2} (${status2})`, duration: Infinity }); + toast("Generating with Model 2…", { + id: toastId, + description: `${name2} (${status2})`, + duration: Infinity, + }); const done = handle2.waitForRunEnd(); handle2.startRun(); await done; @@ -906,7 +965,9 @@ export function SharedComposer({ } } - const canSend = (text.trim().length > 0 || pendingImages.length > 0 || pendingAudio !== null) && !busy && !isComposing; + const hasComposerContent = + text.trim().length > 0 || pendingImages.length > 0 || pendingAudio !== null; + const canSend = hasComposerContent && !busy && !isComposing; return (
{pendingAudio.name} setToolsEnabled(!toolsEnabled)} > @@ -1074,6 +1140,38 @@ export function SharedComposer({ Code {codeToolsEnabled ? : null} + {showImageMenuItem ? ( + setImageToolsEnabled(!imageToolsEnabled)} + > + + Images + {imageToolsEnabled ? : null} + + ) : null} + {showFetchMenuItem ? ( + + setWebFetchToolsEnabled(!webFetchToolsEnabled) + } + > + + Fetch + {webFetchToolsEnabled ? ( + + ) : null} + + ) : null} setSettingsPanelOpen(true)}> MCP @@ -1123,38 +1221,50 @@ export function SharedComposer({ - - + > + + Search + + + ) : null} + {codeToolsEnabled ? ( + + ) : null} {/* Active in compare mode; click to exit back to single chat. */} - {showImagePill && ( + {imageToolsEnabled ? ( - )} - {showWebFetchPill && ( + ) : null} + {webFetchToolsEnabled ? ( - )} + ) : null}
{showReasoningControl ? ( @@ -1392,7 +1509,7 @@ export function SharedComposer({ onClick={startDictation} aria-label="Dictate" > - + ) : ( - ) : ( + ) : hasComposerContent ? ( - + - )} + ) : null}
From 65a9cf102a950c26e736356acdfe6dec1e739fe5 Mon Sep 17 00:00:00 2001 From: wasimysaid Date: Sat, 30 May 2026 20:21:21 +0200 Subject: [PATCH 09/17] feat(sidebar): polish chat navigation --- .../frontend/src/components/app-sidebar.tsx | 1268 +++++++++-------- studio/frontend/src/components/ui/sidebar.tsx | 2 +- 2 files changed, 703 insertions(+), 567 deletions(-) diff --git a/studio/frontend/src/components/app-sidebar.tsx b/studio/frontend/src/components/app-sidebar.tsx index 849e017ea8..58a2d316c9 100644 --- a/studio/frontend/src/components/app-sidebar.tsx +++ b/studio/frontend/src/components/app-sidebar.tsx @@ -42,7 +42,6 @@ import { useAnimatedThemeToggle } from "@/components/ui/animated-theme-toggler"; import { cn } from "@/lib/utils"; import { ChefHatIcon, - ColumnInsertIcon, CursorInfo02Icon, Delete02Icon, DownloadSquare01Icon, @@ -58,13 +57,16 @@ import { TestTube01Icon, ZapIcon, } from "@hugeicons/core-free-icons"; -import { - Tooltip, - TooltipContent, -} from "@/components/ui/tooltip"; +import { Tooltip, TooltipContent } from "@/components/ui/tooltip"; import { Tooltip as TooltipPrimitive } from "radix-ui"; import { HugeiconsIcon } from "@hugeicons/react"; -import { ChevronDown, ChevronsUpDown, MoreHorizontalIcon, Moon, Sun } from "lucide-react"; +import { + ChevronDown, + ChevronsUpDown, + MoreHorizontalIcon, + Moon, + Sun, +} from "lucide-react"; import { Link, useNavigate, useRouterState } from "@tanstack/react-router"; import { ChatSearchDialog, @@ -130,10 +132,7 @@ function getTourId(pathname: string): string | null { // keeps the test-tube outline + horizontal cap + liquid line, dropping // the bubbles. The original export stays untouched, and HugeiconsIcon // renders this trimmed array exactly the same way. -const TestTubeOutlineIcon = TestTube01Icon.slice( - 0, - 3, -) as typeof TestTube01Icon; +const TestTubeOutlineIcon = TestTube01Icon.slice(0, 3) as typeof TestTube01Icon; function runStatusDotClass(status: TrainingRunSummary["status"]): string { switch (status) { @@ -199,8 +198,14 @@ function NavItem({ data-tour={dataTour} className="sidebar-nav-btn h-[35px] rounded-[10px] gap-[8.5px] px-2.5 font-medium group-data-[collapsible=icon]:!w-[32px] group-data-[collapsible=icon]:!rounded-[10px] group-data-[collapsible=icon]:mx-auto" > - - {label} + + + {label} +
{children} @@ -230,17 +235,33 @@ export function AppSidebar() { const [shutdownOpen, setShutdownOpen] = useState(false); const isChatRoute = pathname.startsWith("/chat"); - const isStudioRoute = pathname === "/studio" || pathname.startsWith("/studio/"); + const isStudioRoute = + pathname === "/studio" || pathname.startsWith("/studio/"); const scrollRef = useRef(null); const [scrolled, setScrolled] = useState(false); + const [canScrollDown, setCanScrollDown] = useState(false); useEffect(() => { const el = scrollRef.current; if (!el) return; - const handler = () => setScrolled(el.scrollTop > 0); - handler(); - el.addEventListener("scroll", handler, { passive: true }); - return () => el.removeEventListener("scroll", handler); + + const updateScrollState = () => { + setScrolled(el.scrollTop > 0); + setCanScrollDown(el.scrollTop + el.clientHeight < el.scrollHeight - 1); + }; + + updateScrollState(); + el.addEventListener("scroll", updateScrollState, { passive: true }); + const resizeObserver = new ResizeObserver(updateScrollState); + resizeObserver.observe(el); + const mutationObserver = new MutationObserver(updateScrollState); + mutationObserver.observe(el, { childList: true, subtree: true }); + + return () => { + el.removeEventListener("scroll", updateScrollState); + resizeObserver.disconnect(); + mutationObserver.disconnect(); + }; }, []); const isRecipesRoute = pathname.startsWith("/data-recipes"); @@ -250,10 +271,10 @@ export function AppSidebar() { const storeThreadId = useChatRuntimeStore((s) => s.activeThreadId); const setActiveThreadId = useChatRuntimeStore((s) => s.setActiveThreadId); const activeThreadId = isChatRoute - ? (search.thread as string | undefined) ?? + ? ((search.thread as string | undefined) ?? (search.compare as string | undefined) ?? storeThreadId ?? - undefined + undefined) : undefined; // Training runs @@ -261,12 +282,18 @@ export function AppSidebar() { !chatOnly && isStudioRoute, ); const activeJobId = useTrainingRuntimeStore((s) => s.jobId); - const selectedHistoryRunId = useTrainingRuntimeStore((s) => s.selectedHistoryRunId); - const setSelectedHistoryRunId = useTrainingRuntimeStore((s) => s.setSelectedHistoryRunId); + const selectedHistoryRunId = useTrainingRuntimeStore( + (s) => s.selectedHistoryRunId, + ); + const setSelectedHistoryRunId = useTrainingRuntimeStore( + (s) => s.setSelectedHistoryRunId, + ); const chatDisabled = isTrainingRunning; - async function handleDeleteThread(item: Parameters[0]) { + async function handleDeleteThread( + item: Parameters[0], + ) { await deleteChatItem(item, activeThreadId, (view) => { navigate({ to: "/chat", @@ -316,7 +343,10 @@ export function AppSidebar() { return; } try { - const updated = await renameTrainingRun(target.run.id, nextRunDisplayName); + const updated = await renameTrainingRun( + target.run.id, + nextRunDisplayName, + ); emitTrainingRunUpdated(updated); } catch (err) { toast.error(translate("shell.toast.failedToRenameRun"), { @@ -328,8 +358,9 @@ export function AppSidebar() { type DeleteTarget = | { kind: "chat"; item: SidebarItem } | { kind: "run"; run: TrainingRunSummary }; - const [confirmingDelete, setConfirmingDelete] = - useState(null); + const [confirmingDelete, setConfirmingDelete] = useState( + null, + ); async function commitDelete() { const target = confirmingDelete; @@ -364,560 +395,665 @@ export function AppSidebar() { return ( <> - - - {/* Expanded: compact logo + close toggle */} -
- { - event.preventDefault(); - if (chatDisabled) return; - setActiveThreadId(null); - closeMobileIfOpen(); - void navigate({ - to: "/chat", - search: { new: createNavigationNonce() }, - }); - }} - className="flex items-center gap-[6px] select-none" - aria-label={t("shell.aria.home")} - > - Unsloth - - unsloth - - - {t("shell.beta")} - - - {!isMobile && ( - - - + + - - - - - {t("shell.aria.closeSidebar")} - - - )} -
- - {/* Collapsed: panel icon doubles as expand trigger */} - {!isMobile && ( -
- - - - - - {t("shell.aria.openSidebar")} - - + {t("shell.aria.closeSidebar")} + + + )}
- )} - - - + {/* Collapsed: panel icon doubles as expand trigger */} + {!isMobile && ( +
+ + + + + + {t("shell.aria.openSidebar")} + + +
+ )} + + + + + + { + if (chatDisabled) return; + setActiveThreadId(null); + navigate({ + to: "/chat", + search: { new: createNavigationNonce() }, + }); + closeMobileIfOpen(); + }} + /> + { + if (chatDisabled) return; + useChatSearchStore.getState().open(); + closeMobileIfOpen(); + }} + /> + + + + + + + + { + if (chatOnly) return; + navigate({ to: "/studio" }); + closeMobileIfOpen(); + }} + /> + + { + navigate({ to: "/data-recipes" }); + closeMobileIfOpen(); + }} + /> + + { + if (chatOnly) return; + navigate({ to: "/export" }); + closeMobileIfOpen(); + }} + /> + + + + + + {!isStudioRoute && chatItems.length > 0 && ( + + + + + {t("shell.navigation.recents")} + + + + + + + {chatItems.map((item) => ( + + { + navigate({ + to: "/chat", + search: + item.type === "single" + ? { thread: item.id } + : { compare: item.id }, + }); + closeMobileIfOpen(); + }} + > + {item.title} + + + + + + + openRenameChat(item)} + > + + {t("common.rename")} + + + setConfirmingDelete({ kind: "chat", item }) + } + > + + {t("common.delete")} + + + + + ))} + + + + + + )} + + {isStudioRoute && runItems.length > 0 && !chatOnly && ( + + + + + {t("shell.navigation.recents")} + + + + + + + {runItems.map((run) => { + const isActiveRun = + selectedHistoryRunId === run.id || + activeJobId === run.id; + return ( + + { + setSelectedHistoryRunId(run.id); + closeMobileIfOpen(); + }} + > +
+ + + {run.display_name ?? run.model_name} + + + {formatRelativeShort(run.started_at)} + +
+ + {run.dataset_name} + + + + + + + + openRenameRun(run)} + > + + {t("common.rename")} + + + setConfirmingDelete({ kind: "run", run }) + } + > + + {t("common.delete")} + + + + + ); + })} + + + + + + )} + + + - { - if (chatDisabled) return; - setActiveThreadId(null); - navigate({ to: "/chat", search: { new: createNavigationNonce() } }); - closeMobileIfOpen(); - }} - /> - i.id === search.compare)} - disabled={chatDisabled} - dataTour="chat-compare" - onClick={() => { - if (chatDisabled) return; - setActiveThreadId(null); - navigate({ to: "/chat", search: { compare: createNavigationNonce() } }); - closeMobileIfOpen(); - }} - /> - { - if (chatDisabled) return; - useChatSearchStore.getState().open(); - closeMobileIfOpen(); - }} - /> - - - - - - - - { - if (chatOnly) return; - navigate({ to: "/studio" }); - closeMobileIfOpen(); - }} - /> - - { - navigate({ to: "/data-recipes" }); - closeMobileIfOpen(); - }} - /> - - { - if (chatOnly) return; - navigate({ to: "/export" }); - closeMobileIfOpen(); - }} - /> - - - - - - {!isStudioRoute && chatItems.length > 0 && ( - - - - - {t("shell.navigation.recents")} - - - - - - - {chatItems.map((item) => ( - - { - navigate({ - to: "/chat", - search: - item.type === "single" - ? { thread: item.id } - : { compare: item.id }, - }); - closeMobileIfOpen(); + + + + +
+ +
+
+ + {displayTitle} + + + Unsloth + +
+ + + + + + + useSettingsDialogStore.getState().openDialog() + } + > + + {t("shell.navigation.settings")} + ⌘, + + + useSettingsDialogStore.getState().openDialog("api-keys") + } + > + + {t("shell.navigation.api")} + + {t("common.new")} + + + } + onSelect={(e) => { + e.preventDefault(); + toggleTheme(); }} > - {item.title} - - - - - - - openRenameChat(item)}> - - {t("common.rename")} - - setConfirmingDelete({ kind: "chat", item })} - > - - {t("common.delete")} - - - - - ))} - - - - - - )} - - {isStudioRoute && runItems.length > 0 && !chatOnly && ( - - - - - {t("shell.navigation.recents")} - - - - - - - {runItems.map((run) => { - const isActiveRun = - selectedHistoryRunId === run.id || activeJobId === run.id; - return ( - - { - setSelectedHistoryRunId(run.id); - closeMobileIfOpen(); - }} - > -
- - - {run.display_name ?? run.model_name} - - - {formatRelativeShort(run.started_at)} - -
- - {run.dataset_name} - - - - - - - - openRenameRun(run)}> - - {t("common.rename")} - - - setConfirmingDelete({ kind: "run", run }) - } - > - - {t("common.delete")} - - - - - ); - })} - - - - - - )} - - - - - - - - -
- + ) : ( + + )} + + {isDark + ? t("shell.navigation.lightMode") + : t("shell.navigation.darkMode")} + + + { + const tourId = getTourId(pathname); + if (!tourId) return; + window.dispatchEvent( + new CustomEvent(TOUR_OPEN_EVENT, { + detail: { id: tourId }, + }), + ); + }} + > + + {t("shell.navigation.guidedTour")} + + + + + useSettingsDialogStore.getState().openDialog("about") + } + > + -
-
- {displayTitle} - Unsloth -
- - - - - - useSettingsDialogStore.getState().openDialog()} - > - - {t("shell.navigation.settings")} - ⌘, + {t("common.help")} useSettingsDialogStore.getState().openDialog("api-keys")} - > - - {t("shell.navigation.api")} - - {t("common.new")} - - - } - onSelect={(e) => { e.preventDefault(); toggleTheme(); }} - > - {isDark ? : } - - {isDark - ? t("shell.navigation.lightMode") - : t("shell.navigation.darkMode")} - - - { - const tourId = getTourId(pathname); - if (!tourId) return; - window.dispatchEvent( - new CustomEvent(TOUR_OPEN_EVENT, { - detail: { id: tourId }, - }), - ); + onSelect={async () => { + // Best-effort server-side revocation; ignore network errors + // so the local clear path still runs and the user lands on /login. + try { + await logout(); + } catch { + clearAuthTokens(); + } + void navigate({ to: "/login" }); }} > - - {t("shell.navigation.guidedTour")} + + {t("shell.navigation.logOut")} - - - useSettingsDialogStore.getState().openDialog("about")} - > - - {t("common.help")} - - { - // Best-effort server-side revocation; ignore network errors - // so the local clear path still runs and the user lands on /login. - try { - await logout(); - } catch { - clearAuthTokens(); - } - void navigate({ to: "/login" }); - }} - > - - {t("shell.navigation.logOut")} - - setShutdownOpen(true)}> - - {t("common.shutdown")} - - - - - - - - - - { - if (!open) setConfirmingDelete(null); - }} - > - - - - {confirmingDelete?.kind === "run" - ? t("shell.dialog.deleteRun.title") - : t("shell.dialog.deleteChat.title")} - - - {confirmingDelete?.kind === "run" ? ( - renderEmphasizedTranslation( - t, - "shell.dialog.deleteRun.description", - confirmingDelete.run.display_name ?? - confirmingDelete.run.model_name, - ) - ) : confirmingDelete?.kind === "chat" ? ( - renderEmphasizedTranslation( - t, - "shell.dialog.deleteChat.description", - confirmingDelete.item.title, - ) - ) : null} - - - - - - - - - { - if (!open) setRenamingTarget(null); - }} - > - - - - {renamingTarget?.kind === "run" - ? t("shell.dialog.renameRun.title") - : t("shell.dialog.renameChat.title")} - - - setRenameDraft(event.target.value)} - onKeyDown={(event) => { - if (event.key === "Enter") { - event.preventDefault(); - void commitRename(); + setShutdownOpen(true)}> + + {t("common.shutdown")} + + + + + + + + + + { + if (!open) setConfirmingDelete(null); + }} + > + + + + {confirmingDelete?.kind === "run" + ? t("shell.dialog.deleteRun.title") + : t("shell.dialog.deleteChat.title")} + + + {confirmingDelete?.kind === "run" + ? renderEmphasizedTranslation( + t, + "shell.dialog.deleteRun.description", + confirmingDelete.run.display_name ?? + confirmingDelete.run.model_name, + ) + : confirmingDelete?.kind === "chat" + ? renderEmphasizedTranslation( + t, + "shell.dialog.deleteChat.description", + confirmingDelete.item.title, + ) + : null} + + + + + + + + + { + if (!open) setRenamingTarget(null); + }} + > + + + + {renamingTarget?.kind === "run" + ? t("shell.dialog.renameRun.title") + : t("shell.dialog.renameChat.title")} + + + setRenameDraft(event.target.value)} + onKeyDown={(event) => { + if (event.key === "Enter") { + event.preventDefault(); + void commitRename(); + } + }} + autoFocus + maxLength={120} + placeholder={ + renamingTarget?.kind === "run" + ? t("shell.dialog.renameRun.placeholder") + : t("shell.dialog.renameChat.placeholder") } - }} - autoFocus - maxLength={120} - placeholder={ - renamingTarget?.kind === "run" - ? t("shell.dialog.renameRun.placeholder") - : t("shell.dialog.renameChat.placeholder") - } - aria-label={ - renamingTarget?.kind === "run" - ? t("shell.dialog.renameRun.placeholder") - : t("shell.dialog.renameChat.placeholder") - } - className="focus-visible:border-input focus-visible:ring-0" - /> - - - - - - + aria-label={ + renamingTarget?.kind === "run" + ? t("shell.dialog.renameRun.placeholder") + : t("shell.dialog.renameChat.placeholder") + } + className="focus-visible:border-input focus-visible:ring-0" + /> + + + + + + ); } diff --git a/studio/frontend/src/components/ui/sidebar.tsx b/studio/frontend/src/components/ui/sidebar.tsx index 6be77d01b9..9c3da94cd2 100644 --- a/studio/frontend/src/components/ui/sidebar.tsx +++ b/studio/frontend/src/components/ui/sidebar.tsx @@ -30,7 +30,7 @@ import { LayoutAlignLeftIcon } from "@hugeicons/core-free-icons" const noop = () => {} -const SIDEBAR_WIDTH = "16rem" +const SIDEBAR_WIDTH = "18rem" const SIDEBAR_WIDTH_ICON = "3rem" const SIDEBAR_KEYBOARD_SHORTCUT = "b" From 14384cd4e58bb40d9c47956c5d091f3ddaceb84a Mon Sep 17 00:00:00 2001 From: wasimysaid Date: Sat, 30 May 2026 21:02:49 +0200 Subject: [PATCH 10/17] style(studio): polish chat navigation and composer --- .../frontend/src/components/app-sidebar.tsx | 101 +++++++++--------- .../src/components/assistant-ui/thread.tsx | 6 +- studio/frontend/src/components/ui/sidebar.tsx | 3 +- .../src/features/chat/shared-composer.tsx | 6 +- studio/frontend/src/index.css | 73 ++++++++++--- 5 files changed, 119 insertions(+), 70 deletions(-) diff --git a/studio/frontend/src/components/app-sidebar.tsx b/studio/frontend/src/components/app-sidebar.tsx index 58a2d316c9..b25f3965b4 100644 --- a/studio/frontend/src/components/app-sidebar.tsx +++ b/studio/frontend/src/components/app-sidebar.tsx @@ -525,53 +525,6 @@ export function AppSidebar() { - - - - { - if (chatOnly) return; - navigate({ to: "/studio" }); - closeMobileIfOpen(); - }} - /> - - { - navigate({ to: "/data-recipes" }); - closeMobileIfOpen(); - }} - /> - - { - if (chatOnly) return; - navigate({ to: "/export" }); - closeMobileIfOpen(); - }} - /> - - - - + + + + { + if (chatOnly) return; + navigate({ to: "/studio" }); + closeMobileIfOpen(); + }} + /> + + { + navigate({ to: "/data-recipes" }); + closeMobileIfOpen(); + }} + /> + + { + if (chatOnly) return; + navigate({ to: "/export" }); + closeMobileIfOpen(); + }} + /> + + + + {!isStudioRoute && chatItems.length > 0 && ( - + diff --git a/studio/frontend/src/components/assistant-ui/thread.tsx b/studio/frontend/src/components/assistant-ui/thread.tsx index 52ba313d74..f87a51ae31 100644 --- a/studio/frontend/src/components/assistant-ui/thread.tsx +++ b/studio/frontend/src/components/assistant-ui/thread.tsx @@ -1476,7 +1476,7 @@ const ComposerToolsMenu: FC<{ side?: "top" | "bottom" }> = ({ aria-label="Tools and attachments" className="unsloth-composer-plus" > - + - + diff --git a/studio/frontend/src/components/ui/sidebar.tsx b/studio/frontend/src/components/ui/sidebar.tsx index 9c3da94cd2..b7ac26a3d7 100644 --- a/studio/frontend/src/components/ui/sidebar.tsx +++ b/studio/frontend/src/components/ui/sidebar.tsx @@ -305,9 +305,8 @@ function Sidebar({ data-sidebar="sidebar" data-slot="sidebar-inner" className={cn( - "bg-sidebar flex size-full flex-col overflow-hidden border-r border-sidebar-border", + "bg-sidebar flex size-full flex-col overflow-hidden", "group-data-[variant=floating]:ring-sidebar-border group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1", - hasPinMode && "ring-1 ring-sidebar-border/60", )} > {children} diff --git a/studio/frontend/src/features/chat/shared-composer.tsx b/studio/frontend/src/features/chat/shared-composer.tsx index e9cf589f32..07ea55ca70 100644 --- a/studio/frontend/src/features/chat/shared-composer.tsx +++ b/studio/frontend/src/features/chat/shared-composer.tsx @@ -1078,7 +1078,7 @@ export function SharedComposer({ aria-label="Tools and attachments" className="unsloth-composer-plus" > - + - + ) : null}
diff --git a/studio/frontend/src/index.css b/studio/frontend/src/index.css index bc957ad614..59c0e58eaf 100644 --- a/studio/frontend/src/index.css +++ b/studio/frontend/src/index.css @@ -537,26 +537,30 @@ } .sidebar-sticky-label { - @apply sticky top-0 z-20 rounded-none bg-sidebar pt-0 pb-1.5 pl-[18px] pr-4 text-[13px]! font-medium normal-case tracking-[0.04em] text-nav-fg-muted focus-visible:ring-0! focus-visible:outline-none shadow-[0_-8px_0_0_var(--sidebar)] transition-shadow duration-150; - } - .sidebar-sticky-label.is-scrolled { - @apply shadow-[0_-8px_0_0_var(--sidebar),0_0.5px_0_0_var(--sidebar-border)]; + @apply rounded-none bg-sidebar pt-0 pb-1.5 pl-[18px] pr-4 text-[13px]! font-medium normal-case tracking-[0.04em] text-nav-fg-muted focus-visible:ring-0! focus-visible:outline-none; } .app-sidebar-top-actions { position: relative; z-index: 25; - transition: box-shadow var(--duration-fast) ease-out; + background: var(--sidebar); } - .app-sidebar-top-actions.is-scrolled { - box-shadow: 0 0.5px 0 0 var(--sidebar-border), 0 10px 18px -18px - rgba(0, 0, 0, 0.42); + .app-sidebar-top-actions::after { + content: ""; + position: absolute; + left: 0; + right: 0; + bottom: -16px; + height: 16px; + pointer-events: none; + opacity: 0; + background: linear-gradient(to bottom, var(--sidebar) 0, transparent 100%); + transition: opacity var(--duration-fast) ease-out; } - .dark .app-sidebar-top-actions.is-scrolled { - box-shadow: 0 0.5px 0 0 var(--sidebar-border), 0 12px 20px -18px - rgba(0, 0, 0, 0.72); + .app-sidebar-top-actions.is-scrolled::after { + opacity: 1; } .app-sidebar-scroll-region { @@ -588,6 +592,23 @@ ); } + .app-sidebar-footer { + position: relative; + z-index: 25; + background: var(--sidebar); + } + + .app-sidebar-footer.can-scroll-down::before { + content: ""; + position: absolute; + left: 0; + right: 0; + top: -24px; + height: 24px; + pointer-events: none; + background: linear-gradient(to bottom, transparent 0, var(--sidebar) 100%); + } + /* Neutral panel input surface — sidesteps the green cast on `--input` / `--border` (both have a small chroma at hue ~165 in light mode). Same value drives the preset input pill, the system @@ -891,6 +912,28 @@ display: inline-flex; } + .composer-send-enter { + animation: composer-send-enter 120ms var(--ease-out-quart) both; + } + + @keyframes composer-send-enter { + from { + opacity: 0; + transform: scale(0.92); + } + + to { + opacity: 1; + transform: scale(1); + } + } + + @media (prefers-reduced-motion: reduce) { + .composer-send-enter { + animation: none; + } + } + .composer-input { @apply mb-1 min-h-10 w-full resize-none overflow-y-auto bg-transparent px-1.5 py-2 text-[15px] font-[450] leading-6 outline-none placeholder:text-muted-foreground focus-visible:ring-0; } @@ -989,13 +1032,16 @@ } .unsloth-composer-plus[data-state="open"] { - @apply bg-muted-foreground/15; /* Radix's modal menu sets body pointer-events:none; re-enable on the open trigger so the cursor and click-to-close work. */ pointer-events: auto; cursor: pointer; } + .unsloth-composer-plus[data-state="open"]:hover { + background-color: transparent; + } + .unsloth-composer-plus[data-state="open"] svg { transform: rotate(35deg); } @@ -1055,8 +1101,7 @@ ) { @apply gap-3 pl-4 pr-3 py-2 text-[14px]; cursor: pointer; - /* Pin hover-box radius so dark matches light (same as the container). */ - border-radius: 1.1rem; + border-radius: 12px; } .unsloth-plus-menu [data-slot="dropdown-menu-label"] { From 19436f589a702bc737a168a77a24b22f1c810054 Mon Sep 17 00:00:00 2001 From: wasimysaid Date: Sat, 30 May 2026 21:19:16 +0200 Subject: [PATCH 11/17] style(chat): refine composer pills --- .../src/components/assistant-ui/thread.tsx | 33 +++++++++- .../src/features/chat/shared-composer.tsx | 33 +++++++++- studio/frontend/src/index.css | 61 ++++++++++++++++++- 3 files changed, 124 insertions(+), 3 deletions(-) diff --git a/studio/frontend/src/components/assistant-ui/thread.tsx b/studio/frontend/src/components/assistant-ui/thread.tsx index f87a51ae31..6156a00031 100644 --- a/studio/frontend/src/components/assistant-ui/thread.tsx +++ b/studio/frontend/src/components/assistant-ui/thread.tsx @@ -1013,6 +1013,17 @@ const ReasoningToggle: FC<{ side?: "top" | "bottom" }> = ({ const activeLook = isEffort ? reasoningLockedOn || (effectiveReasoningVisualEnabled && !disabled) : reasoningLockedOn || (effectiveReasoningEnabled && !disabled); + const canDismissReasoning = + activeLook && + !disabled && + !reasoningLockedOn && + effectiveSupportsReasoningOff; + const dismissReasoning = () => { + if (!canDismissReasoning) return; + setReasoningEnabled(false); + applyQwenThinkingParams(false); + setPreserveThinking(false); + }; if (useDropdown) { return ( @@ -1023,6 +1034,7 @@ const ReasoningToggle: FC<{ side?: "top" | "bottom" }> = ({ disabled={disabled} className="unsloth-thinking-pill" data-active={activeLook ? "true" : "false"} + data-dismissible={canDismissReasoning ? "true" : undefined} aria-label={thinkEffortAriaLabel({ modelLoaded, reasoningDisabled: disabled, @@ -1033,7 +1045,22 @@ const ReasoningToggle: FC<{ side?: "top" | "bottom" }> = ({ {activeLook ? ( {isEffort ? `Thinking · ${effortLabel}` : "Thinking"} ) : null} - + + {canDismissReasoning ? ( + { + event.preventDefault(); + event.stopPropagation(); + dismissReasoning(); + }} + onClick={(event) => { + event.preventDefault(); + event.stopPropagation(); + }} + /> + ) : null} = ({ }} className="unsloth-thinking-pill" data-active={activeLook ? "true" : "false"} + data-dismissible={canDismissReasoning ? "true" : undefined} aria-label={thinkToggleAriaLabel({ reasoningLockedOn, modelLoaded, @@ -1175,6 +1203,9 @@ const ReasoningToggle: FC<{ side?: "top" | "bottom" }> = ({ > {activeLook ? Thinking : null} + {canDismissReasoning ? ( + + ) : null} ); }; diff --git a/studio/frontend/src/features/chat/shared-composer.tsx b/studio/frontend/src/features/chat/shared-composer.tsx index 07ea55ca70..3e45fb8c70 100644 --- a/studio/frontend/src/features/chat/shared-composer.tsx +++ b/studio/frontend/src/features/chat/shared-composer.tsx @@ -542,6 +542,17 @@ export function SharedComposer({ ? reasoningLockedOn || (effectiveReasoningVisualEnabled && !reasoningDisabled) : reasoningLockedOn || (effectiveReasoningEnabled && !reasoningDisabled); + const canDismissReasoning = + thinkingActiveLook && + !reasoningDisabled && + !reasoningLockedOn && + effectiveSupportsReasoningOff; + const dismissReasoning = () => { + if (!canDismissReasoning) return; + setReasoningEnabled(false); + applyQwenThinkingParams(false); + setPreserveThinking(false); + }; // Two-pill gating: Search pill lights up when the runtime has either // a local tool runtime (supportsTools, gives us our Code/python + local // web_search) OR a server-side web_search the provider runs for us @@ -1330,6 +1341,7 @@ export function SharedComposer({ disabled={reasoningDisabled} className="unsloth-thinking-pill" data-active={thinkingActiveLook ? "true" : "false"} + data-dismissible={canDismissReasoning ? "true" : undefined} aria-label={thinkEffortAriaLabel({ modelLoaded, reasoningDisabled, @@ -1347,7 +1359,22 @@ export function SharedComposer({ : "Thinking"} ) : null} - + + {canDismissReasoning ? ( + { + event.preventDefault(); + event.stopPropagation(); + dismissReasoning(); + }} + onClick={(event) => { + event.preventDefault(); + event.stopPropagation(); + }} + /> + ) : null} {thinkingActiveLook ? Thinking : null} + {canDismissReasoning ? ( + + ) : null} ) ) : null} diff --git a/studio/frontend/src/index.css b/studio/frontend/src/index.css index 59c0e58eaf..52cdbe705a 100644 --- a/studio/frontend/src/index.css +++ b/studio/frontend/src/index.css @@ -887,6 +887,12 @@ color: var(--foreground); } + .composer-pill-btn > span { + font-size: 13px; + font-weight: 400; + line-height: 17px; + } + .composer-pill-btn svg { width: 16px !important; height: 16px !important; @@ -901,9 +907,18 @@ :hover, :focus-visible ) { + background-color: rgba(0, 0, 0, 0.14); padding-right: 0.25rem; } + .dark + .composer-pill-btn[data-active="true"]:not(:disabled):is( + :hover, + :focus-visible + ) { + background-color: rgba(255, 255, 255, 0.14); + } + .composer-pill-btn[data-active="true"]:not(:disabled):is( :hover, :focus-visible @@ -1036,10 +1051,19 @@ trigger so the cursor and click-to-close work. */ pointer-events: auto; cursor: pointer; + background-color: rgba(0, 0, 0, 0.08); + } + + .dark .unsloth-composer-plus[data-state="open"] { + background-color: rgba(255, 255, 255, 0.08); } .unsloth-composer-plus[data-state="open"]:hover { - background-color: transparent; + background-color: rgba(0, 0, 0, 0.08); + } + + .dark .unsloth-composer-plus[data-state="open"]:hover { + background-color: rgba(255, 255, 255, 0.08); } .unsloth-composer-plus[data-state="open"] svg { @@ -1072,6 +1096,41 @@ color: var(--foreground); } + .unsloth-thinking-pill .composer-pill-close { + display: none; + width: 16px !important; + height: 16px !important; + flex-shrink: 0; + } + + .unsloth-thinking-pill[data-dismissible="true"][data-active="true"]:not( + :disabled + ):is(:hover, :focus-visible) { + background-color: rgba(0, 0, 0, 0.14); + padding-right: 0.25rem; + } + + .dark + .unsloth-thinking-pill[data-dismissible="true"][data-active="true"]:not( + :disabled + ):is(:hover, :focus-visible) { + background-color: rgba(255, 255, 255, 0.14); + } + + .unsloth-thinking-pill[data-dismissible="true"][data-active="true"]:not( + :disabled + ):is(:hover, :focus-visible) + .composer-pill-close { + display: inline-flex; + } + + .unsloth-thinking-pill[data-dismissible="true"][data-active="true"]:not( + :disabled + ):is(:hover, :focus-visible) + .unsloth-thinking-chevron { + display: none; + } + /* Smaller tick for selected Thinking options. */ .unsloth-tick { width: 0.8rem !important; From def605d5b640e1fc863ac16567e5cb7033e34e46 Mon Sep 17 00:00:00 2001 From: wasimysaid Date: Sat, 30 May 2026 22:02:08 +0200 Subject: [PATCH 12/17] fix(chat): harden composer tool and compare flows --- .../src/components/assistant-ui/thread.tsx | 69 +++++++++++++--- .../frontend/src/features/chat/chat-page.tsx | 33 ++++---- studio/frontend/src/features/chat/index.ts | 1 + .../src/features/chat/shared-composer.tsx | 78 ++++++++++++------- .../src/features/chat/utils/compare-id.ts | 9 +++ .../src/features/native-intents/index.ts | 8 ++ 6 files changed, 144 insertions(+), 54 deletions(-) create mode 100644 studio/frontend/src/features/chat/utils/compare-id.ts create mode 100644 studio/frontend/src/features/native-intents/index.ts diff --git a/studio/frontend/src/components/assistant-ui/thread.tsx b/studio/frontend/src/components/assistant-ui/thread.tsx index 6156a00031..139615a9ba 100644 --- a/studio/frontend/src/components/assistant-ui/thread.tsx +++ b/studio/frontend/src/components/assistant-ui/thread.tsx @@ -46,6 +46,7 @@ import { } from "@/components/ui/dropdown-menu"; import { applyQwenThinkingParams, + createCompareId, deleteThreadMessage, getExternalReasoningCapabilities, parseExternalModelId, @@ -1463,9 +1464,29 @@ const ComposerToolsMenu: FC<{ side?: "top" | "bottom" }> = ({ const setToolsEnabled = useChatRuntimeStore((s) => s.setToolsEnabled); const codeToolsEnabled = useChatRuntimeStore((s) => s.codeToolsEnabled); const setCodeToolsEnabled = useChatRuntimeStore((s) => s.setCodeToolsEnabled); + const checkpoint = useChatRuntimeStore((s) => s.params.checkpoint); const modelLoaded = useChatRuntimeStore( (s) => !!s.params.checkpoint && !s.modelLoading, ); + const supportsTools = useChatRuntimeStore((s) => s.supportsTools); + const supportsBuiltinWebSearch = useChatRuntimeStore( + (s) => s.supportsBuiltinWebSearch, + ); + const supportsBuiltinCodeExecution = useChatRuntimeStore( + (s) => s.supportsBuiltinCodeExecution, + ); + const setReasoningEnabled = useChatRuntimeStore((s) => s.setReasoningEnabled); + const connectionsEnabled = useExternalProvidersStore( + (s) => s.connectionsEnabled, + ); + const externalProvidersAll = useExternalProvidersStore((s) => s.providers); + const externalProviders = connectionsEnabled ? externalProvidersAll : []; + const externalSelection = parseExternalModelId(checkpoint); + const selectedExternalProvider = + externalSelection != null + ? externalProviders.find((p) => p.id === externalSelection.providerId) + : undefined; + const isKimiExternal = selectedExternalProvider?.providerType === "kimi"; const supportsBuiltinImageGeneration = useChatRuntimeStore( (s) => s.supportsBuiltinImageGeneration, ); @@ -1486,17 +1507,39 @@ const ComposerToolsMenu: FC<{ side?: "top" | "bottom" }> = ({ const showFetchMenuItem = supportsBuiltinWebFetch || webFetchToolsEnabled; const imageMenuDisabled = modelLoaded && !supportsBuiltinImageGeneration; const fetchMenuDisabled = modelLoaded && !supportsBuiltinWebFetch; + const searchMenuDisabled = + modelLoaded && !(supportsTools || supportsBuiltinWebSearch); + const codeMenuDisabled = + modelLoaded && !(supportsTools || supportsBuiltinCodeExecution); + const searchMenuActive = toolsEnabled && !searchMenuDisabled; + const codeMenuActive = codeToolsEnabled && !codeMenuDisabled; + + const toggleSearchTools = useCallback(() => { + if (searchMenuDisabled) return; + const next = !toolsEnabled; + setToolsEnabled(next); + if (isKimiExternal) { + setReasoningEnabled(!next); + applyQwenThinkingParams(!next); + } + }, [ + isKimiExternal, + searchMenuDisabled, + setReasoningEnabled, + setToolsEnabled, + toolsEnabled, + ]); + + const toggleCodeTools = useCallback(() => { + if (codeMenuDisabled) return; + setCodeToolsEnabled(!codeToolsEnabled); + }, [codeMenuDisabled, codeToolsEnabled, setCodeToolsEnabled]); const startCompare = useCallback(() => { const store = useChatRuntimeStore.getState(); store.setActiveThreadId(null); store.setContextUsage(null); - // crypto.randomUUID is undefined in non-secure contexts (HTTP over a LAN IP). - const compareId = - typeof globalThis.crypto?.randomUUID === "function" - ? globalThis.crypto.randomUUID() - : `${Date.now()}-${Math.random().toString(36).slice(2, 10)}`; - navigate({ to: "/chat", search: { compare: compareId } }); + navigate({ to: "/chat", search: { compare: createCompareId() } }); }, [navigate]); return ( @@ -1545,20 +1588,22 @@ const ComposerToolsMenu: FC<{ side?: "top" | "bottom" }> = ({ setToolsEnabled(!toolsEnabled)} + disabled={searchMenuDisabled} + className={searchMenuActive ? "text-primary font-medium" : undefined} + onSelect={toggleSearchTools} > Web search - {toolsEnabled ? : null} + {searchMenuActive ? : null} setCodeToolsEnabled(!codeToolsEnabled)} + disabled={codeMenuDisabled} + className={codeMenuActive ? "text-primary font-medium" : undefined} + onSelect={toggleCodeTools} > Code - {codeToolsEnabled ? : null} + {codeMenuActive ? : null} {showImageMenuItem ? ( (null); + const [viewBeforeCompare, setViewBeforeCompare] = useState( + null, + ); const inferenceParams = useChatRuntimeStore((state) => state.params); const setInferenceParams = useChatRuntimeStore((state) => state.setParams); const activeGgufVariant = useChatRuntimeStore( @@ -1199,20 +1204,20 @@ export function ChatPage(): ReactElement { const openSidebar = useCallback(() => setPinned(true), [setPinned]); const enterCompare = useCallback(() => { - viewBeforeCompareRef.current = { ...search }; + setViewBeforeCompare({ ...search }); useChatRuntimeStore.getState().setActiveThreadId(null); useChatRuntimeStore.getState().setContextUsage(null); - navigate({ to: "/chat", search: { compare: crypto.randomUUID() } }); + navigate({ to: "/chat", search: { compare: createCompareId() } }); }, [navigate, search]); const exitCompare = useCallback(() => { - const saved = viewBeforeCompareRef.current; + const saved = viewBeforeCompare; // No saved view (compare opened by direct URL); fall back to a fresh chat. if (!saved) { navigate({ to: "/chat" }); return; } - viewBeforeCompareRef.current = null; + setViewBeforeCompare(null); navigate({ to: "/chat", search: saved }); // Restore usage from the last assistant message, but only if it // matches the currently active checkpoint. Without this guard the @@ -1259,7 +1264,7 @@ export function ChatPage(): ReactElement { } }); } - }, [navigate]); + }, [navigate, viewBeforeCompare]); const models = useMemo( () => @@ -1415,7 +1420,7 @@ export function ChatPage(): ReactElement { if (canceled) return; useChatRuntimeStore.getState().setActiveThreadId(null); useChatRuntimeStore.getState().setContextUsage(null); - navigate({ to: "/chat", search: { compare: crypto.randomUUID() } }); + navigate({ to: "/chat", search: { compare: createCompareId() } }); clearHandoff(); console.info("[chat-handoff] loaded lora + opened compare"); return; diff --git a/studio/frontend/src/features/chat/index.ts b/studio/frontend/src/features/chat/index.ts index 61ff727667..25a126fcb6 100644 --- a/studio/frontend/src/features/chat/index.ts +++ b/studio/frontend/src/features/chat/index.ts @@ -7,6 +7,7 @@ export { parseExternalModelId } from "./external-providers"; export { getExternalReasoningCapabilities } from "./provider-capabilities"; export { useExternalProvidersStore } from "./stores/external-providers-store"; export { deleteThreadMessage } from "./utils/delete-thread-message"; +export { createCompareId } from "./utils/compare-id"; export { applyQwenThinkingParams } from "./utils/qwen-params"; export { getInferenceStatus, diff --git a/studio/frontend/src/features/chat/shared-composer.tsx b/studio/frontend/src/features/chat/shared-composer.tsx index 3e45fb8c70..40748d29b0 100644 --- a/studio/frontend/src/features/chat/shared-composer.tsx +++ b/studio/frontend/src/features/chat/shared-composer.tsx @@ -610,6 +610,30 @@ export function SharedComposer({ // Fetch pill: Anthropic-only (web_fetch_20250910 / web_fetch_20260209). const webFetchDisabled = modelLoaded && !supportsBuiltinWebFetch; const showFetchMenuItem = supportsBuiltinWebFetch || webFetchToolsEnabled; + const searchToolsActive = toolsEnabled && !searchDisabled; + const codeToolsActive = codeToolsEnabled && !codeDisabled; + const toggleSearchTools = useCallback(() => { + if (searchDisabled) return; + const next = !toolsEnabled; + setToolsEnabled(next); + // Kimi's $web_search builtin requires thinking=disabled + // (https://platform.kimi.ai/docs/guide/use-web-search). Toggle + // the Think pill off when Search is on, mirroring the backend. + if (isKimiExternal) { + setReasoningEnabled(!next, { persist: false }); + applyQwenThinkingParams(!next); + } + }, [ + isKimiExternal, + searchDisabled, + setReasoningEnabled, + setToolsEnabled, + toolsEnabled, + ]); + const toggleCodeTools = useCallback(() => { + if (codeDisabled) return; + setCodeToolsEnabled(!codeToolsEnabled); + }, [codeDisabled, codeToolsEnabled, setCodeToolsEnabled]); const setPendingAudioStore = useChatRuntimeStore((s) => s.setPendingAudio); const clearPendingAudioStore = useChatRuntimeStore( (s) => s.clearPendingAudio, @@ -657,10 +681,18 @@ export function SharedComposer({ if (!file) continue; // Handle audio files if (file.type.match(/^audio\//i) && file.size <= MAX_AUDIO_SIZE) { - fileToBase64(file).then((base64) => { - setPendingAudio({ name: file.name, base64 }); - setPendingAudioStore(base64, file.name); - }); + void fileToBase64(file) + .then((base64) => { + setPendingAudio({ name: file.name, base64 }); + setPendingAudioStore(base64, file.name); + }) + .catch(() => { + setPendingAudio(null); + clearPendingAudioStore(); + toast.error("Failed to read audio file", { + description: "Try a different audio file or add it again.", + }); + }); continue; } // Handle image files @@ -877,10 +909,6 @@ export function SharedComposer({ const handle1 = handlesRef.current["model1"]; const handle2 = handlesRef.current["model2"]; - // Show user messages immediately on both sides - if (handle1) handle1.appendMessage(content); - if (handle2) handle2.appendMessage(content); - const name1 = model1?.id ? modelDisplayName(model1.id) : ""; const name2 = model2?.id ? modelDisplayName(model2.id) : ""; const toastId = toast("Comparing models…", { duration: Infinity }); @@ -900,6 +928,7 @@ export function SharedComposer({ description: `${name1} (${status1})`, duration: Infinity, }); + handle1.appendMessage(content); const done = handle1.waitForRunEnd(); handle1.startRun(); await done; @@ -923,6 +952,7 @@ export function SharedComposer({ description: `${name2} (${status2})`, duration: Infinity, }); + handle2.appendMessage(content); const done = handle2.waitForRunEnd(); handle2.startRun(); await done; @@ -1132,24 +1162,26 @@ export function SharedComposer({ )} setToolsEnabled(!toolsEnabled)} + onSelect={toggleSearchTools} > Web search - {toolsEnabled ? : null} + {searchToolsActive ? : null} setCodeToolsEnabled(!codeToolsEnabled)} + onSelect={toggleCodeTools} > Code - {codeToolsEnabled ? : null} + {codeToolsActive ? : null} {showImageMenuItem ? ( { - const next = !toolsEnabled; - setToolsEnabled(next); - // Kimi's $web_search builtin requires thinking=disabled - // (https://platform.kimi.ai/docs/guide/use-web-search). Toggle - // the Think pill off when Search is on, mirroring the backend. - if (isKimiExternal) { - setReasoningEnabled(!next, { persist: false }); - applyQwenThinkingParams(!next); - } - }} + onClick={toggleSearchTools} className="composer-pill-btn" - data-active={toolsEnabled && !searchDisabled ? "true" : "false"} + data-active={searchToolsActive ? "true" : "false"} aria-label={ toolsEnabled ? "Disable web search" : "Enable web search" } @@ -1262,9 +1284,9 @@ export function SharedComposer({

@@ -383,7 +388,8 @@ function getWelcomeEmoji(): string { const ThreadWelcome: FC<{ hideComposer?: boolean; threadId?: string | null; -}> = ({ hideComposer, threadId }) => { + onEnterCompare?: () => void; +}> = ({ hideComposer, threadId, onEnterCompare }) => { const [currentEmoji] = useState(getWelcomeEmoji); const currentEmojiSrc = @@ -401,7 +407,12 @@ const ThreadWelcome: FC<{ What’s on your mind today?

- {!hideComposer && } + {!hideComposer && ( + + )}
@@ -412,11 +423,17 @@ const ComposerAnimated: FC<{ disabled?: boolean; threadId?: string | null; menuSide?: "top" | "bottom"; -}> = ({ disabled, threadId, menuSide }) => { + onEnterCompare?: () => void; +}> = ({ disabled, threadId, menuSide, onEnterCompare }) => { return (
- +
); @@ -450,7 +467,8 @@ const Composer: FC<{ disabled?: boolean; threadId?: string | null; menuSide?: "top" | "bottom"; -}> = ({ disabled, threadId, menuSide }) => { + onEnterCompare?: () => void; +}> = ({ disabled, threadId, menuSide, onEnterCompare }) => { const aui = useAui(); const { overlay, closeOverlay } = useGeneratedImageOverlay(); const setImageToolsEnabled = useChatRuntimeStore( @@ -634,7 +652,10 @@ const Composer: FC<{ data-expanded={composerExpanded ? "true" : "false"} >
- + {composerExpanded ? ( <> {toolsEnabled ? : null} @@ -969,6 +990,7 @@ const ReasoningToggle: FC<{ side?: "top" | "bottom" }> = ({ { isReasoningProvider: selectedExternalProvider?.isReasoningModel === true, + baseUrl: selectedExternalProvider?.baseUrl ?? null, }, ) : null; @@ -1453,9 +1475,10 @@ const PROJECTS_PR_URL = "https://github.com/unslothai/unsloth/pull/5725"; // Plus menu: attachment and workflow actions. Opens downward in the centered // welcome composer; the docked composer passes side="top" to open upward. -const ComposerToolsMenu: FC<{ side?: "top" | "bottom" }> = ({ - side = "bottom", -}) => { +const ComposerToolsMenu: FC<{ + side?: "top" | "bottom"; + onEnterCompare?: () => void; +}> = ({ side = "bottom", onEnterCompare }) => { const navigate = useNavigate(); const setSettingsPanelOpen = useChatRuntimeStore( (s) => s.setSettingsPanelOpen, @@ -1536,11 +1559,15 @@ const ComposerToolsMenu: FC<{ side?: "top" | "bottom" }> = ({ }, [codeMenuDisabled, codeToolsEnabled, setCodeToolsEnabled]); const startCompare = useCallback(() => { + if (onEnterCompare) { + onEnterCompare(); + return; + } const store = useChatRuntimeStore.getState(); store.setActiveThreadId(null); store.setContextUsage(null); navigate({ to: "/chat", search: { compare: createCompareId() } }); - }, [navigate]); + }, [navigate, onEnterCompare]); return ( @@ -1641,17 +1668,17 @@ const ComposerToolsMenu: FC<{ side?: "top" | "bottom" }> = ({ More - + - Canvas + Canvas (coming soon) startCompare()}> Compare chat - + - RAG + RAG (coming soon) diff --git a/studio/frontend/src/features/chat/chat-page.tsx b/studio/frontend/src/features/chat/chat-page.tsx index 8140f9514b..fb7a2eaeb1 100644 --- a/studio/frontend/src/features/chat/chat-page.tsx +++ b/studio/frontend/src/features/chat/chat-page.tsx @@ -159,7 +159,12 @@ function messageHasImage(message: MessageRecord): boolean { const SingleContent = memo(function SingleContent({ threadId, newThreadNonce, -}: { threadId?: string; newThreadNonce?: string }): ReactElement { + onEnterCompare, +}: { + threadId?: string; + newThreadNonce?: string; + onEnterCompare?: () => void; +}): ReactElement { return (
- +
); @@ -1204,7 +1213,14 @@ export function ChatPage(): ReactElement { const openSidebar = useCallback(() => setPinned(true), [setPinned]); const enterCompare = useCallback(() => { - setViewBeforeCompare({ ...search }); + const saved: ChatSearch = { ...search }; + const active = useChatRuntimeStore.getState().activeThreadId; + if (!(saved.thread || saved.new) && active) { + if (!active.startsWith("__LOCALID_")) { + saved.thread = active; + } + } + setViewBeforeCompare(saved); useChatRuntimeStore.getState().setActiveThreadId(null); useChatRuntimeStore.getState().setContextUsage(null); navigate({ to: "/chat", search: { compare: createCompareId() } }); @@ -1618,6 +1634,7 @@ export function ChatPage(): ReactElement { key={view.threadId ?? "single"} threadId={view.threadId} newThreadNonce={view.newThreadNonce} + onEnterCompare={enterCompare} /> ) : ( ([]); - const [pendingAudio, setPendingAudio] = useState<{ - name: string; - base64: string; - } | null>(null); + const [pendingAudio, setPendingAudio] = useState(null); const [dragging, setDragging] = useState(false); const [isComposing, setIsComposing] = useState(false); const textareaRef = useRef(null); @@ -414,6 +418,15 @@ export function SharedComposer({ const stuckImeTimerRef = useRef | null>(null); const fileInputRef = useRef(null); const audioInputRef = useRef(null); + const composerDraftRef = useRef({ + text: "", + pendingImages: [], + pendingAudio: null, + }); + + useEffect(() => { + composerDraftRef.current = { text, pendingImages, pendingAudio }; + }, [text, pendingImages, pendingAudio]); const activeModel = useChatRuntimeStore((s) => { const checkpoint = s.params.checkpoint; @@ -702,7 +715,7 @@ export function SharedComposer({ droppedImageForUnavailable = true; continue; } - next.push({ id: crypto.randomUUID(), file }); + next.push({ id: createSafeId(), file }); } if (droppedImageForUnavailable && attachUnavailableReason) { toast.error(attachUnavailableReason); @@ -785,6 +798,38 @@ export function SharedComposer({ return; } + const draft: ComposerDraft = { text, pendingImages, pendingAudio }; + const clearComposerDraft = () => { + composerDraftRef.current = { + text: "", + pendingImages: [], + pendingAudio: null, + }; + setText(""); + setPendingImages([]); + setPendingAudio(null); + clearPendingAudioStore(); + textareaRef.current?.focus(); + }; + const restoreComposerDraft = () => { + const current = composerDraftRef.current; + const hasNewContent = + current.text.trim().length > 0 || + current.pendingImages.length > 0 || + current.pendingAudio !== null; + if (hasNewContent) return; + composerDraftRef.current = draft; + setText(draft.text); + setPendingImages(draft.pendingImages); + setPendingAudio(draft.pendingAudio); + if (draft.pendingAudio) { + setPendingAudioStore( + draft.pendingAudio.base64, + draft.pendingAudio.name, + ); + } + }; + const content: CompareMessagePart[] = []; for (const { file } of pendingImages) { try { @@ -802,11 +847,7 @@ export function SharedComposer({ } if (content.length === 0) return; - setText(""); - setPendingImages([]); - setPendingAudio(null); - clearPendingAudioStore(); - textareaRef.current?.focus(); + clearComposerDraft(); // Generalized compare: load each model before dispatching to its side if (isGeneralizedCompare) { @@ -960,6 +1001,7 @@ export function SharedComposer({ toast.success("Compare complete", { id: toastId, duration: 2000 }); } catch (err) { + restoreComposerDraft(); toast.error("Compare failed", { id: toastId, description: err instanceof Error ? err.message : "Unknown error", @@ -1225,9 +1267,9 @@ export function SharedComposer({ More - + - Canvas + Canvas (coming soon) {/* Always active: this menu only renders in compare mode. Ticked like Web search/Code; click toggles it off. */} @@ -1239,9 +1281,9 @@ export function SharedComposer({ Compare chat - + - RAG + RAG (coming soon) diff --git a/studio/frontend/src/features/chat/utils/compare-id.ts b/studio/frontend/src/features/chat/utils/compare-id.ts index 993603c1d2..3632775603 100644 --- a/studio/frontend/src/features/chat/utils/compare-id.ts +++ b/studio/frontend/src/features/chat/utils/compare-id.ts @@ -1,9 +1,13 @@ // SPDX-License-Identifier: AGPL-3.0-only // Copyright 2026-present the Unsloth AI Inc. team. All rights reserved. See /studio/LICENSE.AGPL-3.0 -export function createCompareId(): string { +export function createSafeId(): string { if (typeof globalThis.crypto?.randomUUID === "function") { return globalThis.crypto.randomUUID(); } return `${Date.now()}-${Math.random().toString(36).slice(2, 10)}`; } + +export function createCompareId(): string { + return createSafeId(); +} diff --git a/studio/frontend/src/index.css b/studio/frontend/src/index.css index 52cdbe705a..dd5cf0d6ce 100644 --- a/studio/frontend/src/index.css +++ b/studio/frontend/src/index.css @@ -859,6 +859,15 @@ --menu-soft-shadow: rgba(0, 0, 0, 0.28); } + .app-user-menu.menu-soft-surface, + .app-user-menu.menu-soft-surface-up { + box-shadow: 0 2px 8px -2px rgba(27, 27, 31, 0.16); + } + .dark .app-user-menu.menu-soft-surface, + .dark .app-user-menu.menu-soft-surface-up { + box-shadow: 0 3px 12px -6px rgba(0, 0, 0, 0.46); + } + .chat-composer-surface { @apply relative flex w-full flex-col rounded-[32px] bg-white dark:bg-card px-3 py-3 outline-none transition-shadow; font-family: var(--font-sans); From 72eff32065b9cb499e25cec569e306cce6e63487 Mon Sep 17 00:00:00 2001 From: wasimysaid Date: Sat, 30 May 2026 23:00:41 +0200 Subject: [PATCH 14/17] style(chat): polish composer and sidebar interactions --- .../assistant-ui/model-selector.tsx | 66 +++++++++++++++---- .../src/features/chat/shared-composer.tsx | 2 +- studio/frontend/src/index.css | 41 ++++++++++-- 3 files changed, 90 insertions(+), 19 deletions(-) diff --git a/studio/frontend/src/components/assistant-ui/model-selector.tsx b/studio/frontend/src/components/assistant-ui/model-selector.tsx index 8058a4d322..474d776a8c 100644 --- a/studio/frontend/src/components/assistant-ui/model-selector.tsx +++ b/studio/frontend/src/components/assistant-ui/model-selector.tsx @@ -10,7 +10,6 @@ import { } from "@/components/ui/popover"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; import { usePlatformStore } from "@/config/env"; -import { isCustomProviderType } from "@/features/chat/external-providers"; import { cn } from "@/lib/utils"; import { ArrowDown01Icon, @@ -32,6 +31,22 @@ import type { import { HubModelPicker, LoraModelPicker } from "./model-selector/pickers"; import { Input } from "../ui/input"; +const CUSTOM_PROVIDER_TYPES_WITH_FALLBACK_LOGO = new Set([ + "custom", + "llama_cpp", + "vllm", + "ollama", +]); + +function isCustomProviderTypeWithFallbackLogo( + providerType: string | undefined, +): boolean { + return ( + providerType !== undefined && + CUSTOM_PROVIDER_TYPES_WITH_FALLBACK_LOGO.has(providerType) + ); +} + const PROVIDER_LOGO_EXT: Record = { openai: "svg", mistral: "svg", @@ -64,7 +79,7 @@ function ExternalProviderLogo({ title?: string; }) { const src = providerLogoSrc(providerType); - if (!src && isCustomProviderType(providerType)) { + if (!src && isCustomProviderTypeWithFallbackLogo(providerType)) { return ( )} {currentModel?.icon ? ( - {currentModel.icon} + + {currentModel.icon} + ) : null} @@ -228,7 +246,10 @@ function ModelSelectorContent({ const chatOnly = usePlatformStore((s) => s.isChatOnly()); const hasExternal = externalModels.length > 0; const chatOnlyTabsDefault = useMemo( - () => (value && externalModels.some((model) => model.id === value) ? "external" : "hub"), + () => + value && externalModels.some((model) => model.id === value) + ? "external" + : "hub", [externalModels, value], ); const studioTabsDefault = useMemo((): "hub" | "lora" | "external" => { @@ -246,7 +267,7 @@ function ModelSelectorContent({ align="start" data-tour={dataTour} className={cn( - "menu-soft-surface ring-0 w-[min(440px,calc(100vw-1rem))] max-w-[calc(100vw-1rem)] min-w-0 gap-0 p-2", + "model-selector-menu menu-soft-surface ring-0 w-[min(440px,calc(100vw-1rem))] max-w-[calc(100vw-1rem)] min-w-0 gap-0 p-2", className, )} > @@ -258,7 +279,12 @@ function ModelSelectorContent({ Connected - + ) : ( - + ) ) : ( Hub models Fine-tuned - {hasExternal ? Connected : null} + {hasExternal ? ( + Connected + ) : null} - + @@ -420,7 +458,9 @@ export function ModelSelector({ const found = optionById.get(selected); if (activeGgufVariant) { const desc = `GGUF · ${activeGgufVariant}`; - return found ? { ...found, description: desc } : { id: selected, name: selected, description: desc }; + return found + ? { ...found, description: desc } + : { id: selected, name: selected, description: desc }; } return found ?? { id: selected, name: selected }; }, [selected, optionById, activeGgufVariant]); diff --git a/studio/frontend/src/features/chat/shared-composer.tsx b/studio/frontend/src/features/chat/shared-composer.tsx index d9ad02067a..cb1bc72ffe 100644 --- a/studio/frontend/src/features/chat/shared-composer.tsx +++ b/studio/frontend/src/features/chat/shared-composer.tsx @@ -1130,7 +1130,7 @@ export function SharedComposer({ dir="auto" />
-
+
span { + font-size: 13px; + font-weight: 400; + line-height: 17px; + } + + .unsloth-thinking-pill svg { + width: 16px !important; + height: 16px !important; + flex-shrink: 0; } .unsloth-thinking-pill[data-active="true"], @@ -1555,15 +1586,15 @@ } [data-sidebar="content"] { - scrollbar-color: oklch(0.5 0 0 / 0.22) var(--sidebar); + scrollbar-color: oklch(0.5 0 0 / 0.22) transparent; } .dark [data-sidebar="content"] { - scrollbar-color: oklch(0.72 0 0 / 0.25) var(--sidebar); + scrollbar-color: oklch(0.72 0 0 / 0.25) transparent; } [data-sidebar="content"]::-webkit-scrollbar-track { - background: var(--sidebar); + background: transparent; } [data-sidebar="content"]::-webkit-scrollbar-thumb { From 5d2b1890685ec15ad678747cd4b33bf2e47f6c3c Mon Sep 17 00:00:00 2001 From: wasimysaid Date: Sat, 30 May 2026 23:20:34 +0200 Subject: [PATCH 15/17] fix(chat): gate compare menu by model support --- .../src/components/assistant-ui/thread.tsx | 37 +++++++++++++++---- .../frontend/src/features/chat/chat-page.tsx | 4 ++ 2 files changed, 33 insertions(+), 8 deletions(-) diff --git a/studio/frontend/src/components/assistant-ui/thread.tsx b/studio/frontend/src/components/assistant-ui/thread.tsx index 4b9b83319f..9cbb0fb397 100644 --- a/studio/frontend/src/components/assistant-ui/thread.tsx +++ b/studio/frontend/src/components/assistant-ui/thread.tsx @@ -125,8 +125,15 @@ export const Thread: FC<{ hideComposer?: boolean; hideWelcome?: boolean; targetThreadId?: string; + canCompare?: boolean; onEnterCompare?: () => void; -}> = ({ hideComposer, hideWelcome, targetThreadId, onEnterCompare }) => { +}> = ({ + hideComposer, + hideWelcome, + targetThreadId, + canCompare = true, + onEnterCompare, +}) => { // Intent-aware autoscroll: replaces assistant-ui's built-in autoscroll // to prevent the streaming-mutation race that makes the viewport snap // back to the bottom while the user is scrolling up (see the hook for @@ -172,6 +179,7 @@ export const Thread: FC<{ @@ -216,6 +224,7 @@ export const Thread: FC<{ @@ -321,8 +330,9 @@ const GeneratedImageViewportOverlay: FC<{ hideComposer?: boolean }> = ({ const ThreadComposerDock: FC<{ disabled?: boolean; threadId?: string | null; + canCompare?: boolean; onEnterCompare?: () => void; -}> = ({ disabled, threadId, onEnterCompare }) => { +}> = ({ disabled, threadId, canCompare = true, onEnterCompare }) => { const { overlay } = useGeneratedImageOverlay(); return ( @@ -342,6 +352,7 @@ const ThreadComposerDock: FC<{ disabled={disabled} threadId={threadId} menuSide="top" + canCompare={canCompare} onEnterCompare={onEnterCompare} />
@@ -388,8 +399,9 @@ function getWelcomeEmoji(): string { const ThreadWelcome: FC<{ hideComposer?: boolean; threadId?: string | null; + canCompare?: boolean; onEnterCompare?: () => void; -}> = ({ hideComposer, threadId, onEnterCompare }) => { +}> = ({ hideComposer, threadId, canCompare = true, onEnterCompare }) => { const [currentEmoji] = useState(getWelcomeEmoji); const currentEmojiSrc = @@ -410,6 +422,7 @@ const ThreadWelcome: FC<{ {!hideComposer && ( )} @@ -423,8 +436,9 @@ const ComposerAnimated: FC<{ disabled?: boolean; threadId?: string | null; menuSide?: "top" | "bottom"; + canCompare?: boolean; onEnterCompare?: () => void; -}> = ({ disabled, threadId, menuSide, onEnterCompare }) => { +}> = ({ disabled, threadId, menuSide, canCompare = true, onEnterCompare }) => { return (
@@ -432,6 +446,7 @@ const ComposerAnimated: FC<{ disabled={disabled} threadId={threadId} menuSide={menuSide} + canCompare={canCompare} onEnterCompare={onEnterCompare} />
@@ -467,8 +482,9 @@ const Composer: FC<{ disabled?: boolean; threadId?: string | null; menuSide?: "top" | "bottom"; + canCompare?: boolean; onEnterCompare?: () => void; -}> = ({ disabled, threadId, menuSide, onEnterCompare }) => { +}> = ({ disabled, threadId, menuSide, canCompare = true, onEnterCompare }) => { const aui = useAui(); const { overlay, closeOverlay } = useGeneratedImageOverlay(); const setImageToolsEnabled = useChatRuntimeStore( @@ -654,6 +670,7 @@ const Composer: FC<{
{composerExpanded ? ( @@ -1477,8 +1494,9 @@ const PROJECTS_PR_URL = "https://github.com/unslothai/unsloth/pull/5725"; // welcome composer; the docked composer passes side="top" to open upward. const ComposerToolsMenu: FC<{ side?: "top" | "bottom"; + canCompare?: boolean; onEnterCompare?: () => void; -}> = ({ side = "bottom", onEnterCompare }) => { +}> = ({ side = "bottom", canCompare = true, onEnterCompare }) => { const navigate = useNavigate(); const setSettingsPanelOpen = useChatRuntimeStore( (s) => s.setSettingsPanelOpen, @@ -1559,6 +1577,9 @@ const ComposerToolsMenu: FC<{ }, [codeMenuDisabled, codeToolsEnabled, setCodeToolsEnabled]); const startCompare = useCallback(() => { + if (!canCompare) { + return; + } if (onEnterCompare) { onEnterCompare(); return; @@ -1567,7 +1588,7 @@ const ComposerToolsMenu: FC<{ store.setActiveThreadId(null); store.setContextUsage(null); navigate({ to: "/chat", search: { compare: createCompareId() } }); - }, [navigate, onEnterCompare]); + }, [canCompare, navigate, onEnterCompare]); return ( @@ -1672,7 +1693,7 @@ const ComposerToolsMenu: FC<{ Canvas (coming soon) - startCompare()}> + Compare chat diff --git a/studio/frontend/src/features/chat/chat-page.tsx b/studio/frontend/src/features/chat/chat-page.tsx index fb7a2eaeb1..3148e4978c 100644 --- a/studio/frontend/src/features/chat/chat-page.tsx +++ b/studio/frontend/src/features/chat/chat-page.tsx @@ -159,10 +159,12 @@ function messageHasImage(message: MessageRecord): boolean { const SingleContent = memo(function SingleContent({ threadId, newThreadNonce, + canCompare, onEnterCompare, }: { threadId?: string; newThreadNonce?: string; + canCompare?: boolean; onEnterCompare?: () => void; }): ReactElement { return ( @@ -175,6 +177,7 @@ const SingleContent = memo(function SingleContent({
@@ -1634,6 +1637,7 @@ export function ChatPage(): ReactElement { key={view.threadId ?? "single"} threadId={view.threadId} newThreadNonce={view.newThreadNonce} + canCompare={canCompare} onEnterCompare={enterCompare} /> ) : ( From b24a450f261b2bea38d66a26224834c6144a527e Mon Sep 17 00:00:00 2001 From: wasimysaid Date: Sun, 31 May 2026 03:56:07 +0200 Subject: [PATCH 16/17] style(chat): restore composer active control states --- .../src/components/assistant-ui/thread.tsx | 87 ++++++----------- .../src/features/chat/shared-composer.tsx | 37 +------- studio/frontend/src/index.css | 95 ++++++++++--------- 3 files changed, 80 insertions(+), 139 deletions(-) diff --git a/studio/frontend/src/components/assistant-ui/thread.tsx b/studio/frontend/src/components/assistant-ui/thread.tsx index 9cbb0fb397..34f5ff42fe 100644 --- a/studio/frontend/src/components/assistant-ui/thread.tsx +++ b/studio/frontend/src/components/assistant-ui/thread.tsx @@ -699,8 +699,12 @@ const Composer: FC<{ {...inputProps} /> @@ -1053,18 +1057,6 @@ const ReasoningToggle: FC<{ side?: "top" | "bottom" }> = ({ const activeLook = isEffort ? reasoningLockedOn || (effectiveReasoningVisualEnabled && !disabled) : reasoningLockedOn || (effectiveReasoningEnabled && !disabled); - const canDismissReasoning = - activeLook && - !disabled && - !reasoningLockedOn && - effectiveSupportsReasoningOff; - const dismissReasoning = () => { - if (!canDismissReasoning) return; - setReasoningEnabled(false); - applyQwenThinkingParams(false); - setPreserveThinking(false); - }; - if (useDropdown) { return ( @@ -1074,7 +1066,6 @@ const ReasoningToggle: FC<{ side?: "top" | "bottom" }> = ({ disabled={disabled} className="unsloth-thinking-pill" data-active={activeLook ? "true" : "false"} - data-dismissible={canDismissReasoning ? "true" : undefined} aria-label={thinkEffortAriaLabel({ modelLoaded, reasoningDisabled: disabled, @@ -1086,21 +1077,6 @@ const ReasoningToggle: FC<{ side?: "top" | "bottom" }> = ({ {isEffort ? `Thinking · ${effortLabel}` : "Thinking"} ) : null} - {canDismissReasoning ? ( - { - event.preventDefault(); - event.stopPropagation(); - dismissReasoning(); - }} - onClick={(event) => { - event.preventDefault(); - event.stopPropagation(); - }} - /> - ) : null} = ({ }} className="unsloth-thinking-pill" data-active={activeLook ? "true" : "false"} - data-dismissible={canDismissReasoning ? "true" : undefined} aria-label={thinkToggleAriaLabel({ reasoningLockedOn, modelLoaded, @@ -1243,9 +1218,6 @@ const ReasoningToggle: FC<{ side?: "top" | "bottom" }> = ({ > {activeLook ? Thinking : null} - {canDismissReasoning ? ( - - ) : null} ); }; @@ -1727,10 +1699,9 @@ const ComposerToolsMenu: FC<{ const ComposerRightControls: FC<{ disabled?: boolean; - showSend?: boolean; shouldBlockSend?: () => boolean; menuSide?: "top" | "bottom"; -}> = ({ disabled, showSend, shouldBlockSend, menuSide }) => { +}> = ({ disabled, shouldBlockSend, menuSide }) => { return (
@@ -1758,29 +1729,27 @@ const ComposerRightControls: FC<{ - {showSend ? ( - !thread.isRunning}> - - { - if (shouldBlockSend?.()) { - event.preventDefault(); - } - }} - className="aui-composer-send composer-send-enter size-8 rounded-full disabled:bg-transparent disabled:text-foreground/40 disabled:opacity-100 disabled:pointer-events-none" - aria-label="Send message" - > - - - - - ) : null} + !thread.isRunning}> + + { + if (shouldBlockSend?.()) { + event.preventDefault(); + } + }} + className="aui-composer-send composer-send-enter size-8 rounded-full disabled:bg-primary/35 disabled:text-primary-foreground/80 disabled:opacity-100 disabled:pointer-events-none" + aria-label="Send message" + > + + + + thread.isRunning}> {thinkingActiveLook ? Thinking : null} - {canDismissReasoning ? ( - - ) : null} ) ) : null} @@ -1631,20 +1600,20 @@ export function SharedComposer({ > - ) : hasComposerContent ? ( + ) : ( - ) : null} + )}
diff --git a/studio/frontend/src/index.css b/studio/frontend/src/index.css index 60eb5616c8..5e24c202e4 100644 --- a/studio/frontend/src/index.css +++ b/studio/frontend/src/index.css @@ -900,19 +900,21 @@ } .composer-pill-btn { - @apply flex h-6 cursor-pointer items-center gap-1 rounded-full pl-1 pr-2 py-0 text-[14px] font-medium leading-6 text-muted-foreground/75 transition-colors hover:bg-black/[0.06] dark:hover:bg-white/[0.08] disabled:cursor-not-allowed disabled:opacity-40; + @apply flex h-6 cursor-pointer items-center gap-1 rounded-full pl-1 pr-2 py-0 text-[14px] font-medium leading-6 text-muted-foreground/75 transition-colors hover:bg-primary/10 dark:hover:bg-primary/15 disabled:cursor-not-allowed disabled:opacity-40; + } + + .composer-pill-btn:is(:hover, :focus-visible) { + background-color: color-mix(in oklch, var(--primary) 10%, transparent); + color: var(--foreground); + } + + .dark .composer-pill-btn:is(:hover, :focus-visible) { + background-color: color-mix(in oklch, var(--primary) 15%, transparent); + color: var(--foreground); } - .composer-pill-btn:is(:hover, :focus-visible), .composer-pill-btn[data-active="true"] { - background-color: rgba(0, 0, 0, 0.08); - color: var(--foreground); - } - - .dark .composer-pill-btn:is(:hover, :focus-visible), - .dark .composer-pill-btn[data-active="true"] { - background-color: rgba(255, 255, 255, 0.08); - color: var(--foreground); + color: var(--primary); } .composer-pill-btn > span { @@ -929,14 +931,15 @@ .composer-pill-close { display: none; + order: -1; } .composer-pill-btn[data-active="true"]:not(:disabled):is( :hover, :focus-visible ) { - background-color: rgba(0, 0, 0, 0.14); - padding-right: 0.25rem; + background-color: color-mix(in oklch, var(--primary) 10%, transparent); + color: var(--primary); } .dark @@ -944,7 +947,16 @@ :hover, :focus-visible ) { - background-color: rgba(255, 255, 255, 0.14); + background-color: color-mix(in oklch, var(--primary) 15%, transparent); + color: var(--primary); + } + + .composer-pill-btn[data-active="true"]:not(:disabled):is( + :hover, + :focus-visible + ) + > svg:not(.composer-pill-close) { + display: none; } .composer-pill-btn[data-active="true"]:not(:disabled):is( @@ -1106,7 +1118,7 @@ /* Right-side Thinking pill (toggle or dropdown). */ .unsloth-thinking-pill { - @apply inline-flex h-6 shrink-0 cursor-pointer items-center gap-1 rounded-full pl-1 pr-2 py-0 text-[14px] font-medium leading-6 text-muted-foreground/75 transition-colors hover:bg-black/[0.06] dark:hover:bg-white/[0.08] disabled:cursor-not-allowed disabled:opacity-40; + @apply inline-flex h-6 shrink-0 cursor-pointer items-center gap-1 rounded-full pl-1 pr-2 py-0 text-[14px] font-medium leading-6 text-muted-foreground/75 transition-colors hover:bg-primary/10 dark:hover:bg-primary/15 disabled:cursor-not-allowed disabled:opacity-40; } .unsloth-thinking-pill > span { @@ -1121,54 +1133,45 @@ flex-shrink: 0; } - .unsloth-thinking-pill[data-active="true"], - .unsloth-thinking-pill[data-state="open"] { - background-color: rgba(0, 0, 0, 0.08); - color: var(--foreground); + .unsloth-thinking-pill[data-active="true"] { + color: var(--primary); /* See .unsloth-composer-plus: re-enable pointer-events on the open trigger. */ pointer-events: auto; cursor: pointer; } - .dark .unsloth-thinking-pill[data-active="true"], + .unsloth-thinking-pill[data-state="open"] { + background-color: rgba(0, 0, 0, 0.08); + color: var(--foreground); + pointer-events: auto; + cursor: pointer; + } + + .unsloth-thinking-pill[data-active="true"][data-state="open"] { + color: var(--primary); + } + .dark .unsloth-thinking-pill[data-state="open"] { background-color: rgba(255, 255, 255, 0.08); color: var(--foreground); } - .unsloth-thinking-pill .composer-pill-close { - display: none; - width: 16px !important; - height: 16px !important; - flex-shrink: 0; + .dark .unsloth-thinking-pill[data-active="true"][data-state="open"] { + color: var(--primary); } - .unsloth-thinking-pill[data-dismissible="true"][data-active="true"]:not( - :disabled - ):is(:hover, :focus-visible) { - background-color: rgba(0, 0, 0, 0.14); - padding-right: 0.25rem; + .unsloth-thinking-pill:is(:hover, :focus-visible) { + background-color: color-mix(in oklch, var(--primary) 10%, transparent); + color: var(--foreground); } - .dark - .unsloth-thinking-pill[data-dismissible="true"][data-active="true"]:not( - :disabled - ):is(:hover, :focus-visible) { - background-color: rgba(255, 255, 255, 0.14); + .dark .unsloth-thinking-pill:is(:hover, :focus-visible) { + background-color: color-mix(in oklch, var(--primary) 15%, transparent); + color: var(--foreground); } - .unsloth-thinking-pill[data-dismissible="true"][data-active="true"]:not( - :disabled - ):is(:hover, :focus-visible) - .composer-pill-close { - display: inline-flex; - } - - .unsloth-thinking-pill[data-dismissible="true"][data-active="true"]:not( - :disabled - ):is(:hover, :focus-visible) - .unsloth-thinking-chevron { - display: none; + .unsloth-thinking-pill[data-active="true"]:is(:hover, :focus-visible) { + color: var(--primary); } /* Smaller tick for selected Thinking options. */ From fbc5b81b544467f884dabf99faa316fe00a119f5 Mon Sep 17 00:00:00 2001 From: shimmyshimmer <107991372+shimmyshimmer@users.noreply.github.com> Date: Wed, 3 Jun 2026 20:38:47 -0700 Subject: [PATCH 17/17] style(chat): fade composer dock edge and tune plus morph timing The composer dock backdrop was a solid block with a hard top edge, so chat text scrolling underneath got cut off abruptly. Replace it with a gradient that stays solid behind the composer and fades to transparent over the top 28px. Also set the plus to x morph to 250ms; 200ms felt too abrupt and 300ms too slow. --- studio/frontend/src/components/assistant-ui/thread.tsx | 3 ++- studio/frontend/src/index.css | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/studio/frontend/src/components/assistant-ui/thread.tsx b/studio/frontend/src/components/assistant-ui/thread.tsx index 34f5ff42fe..4c1665e924 100644 --- a/studio/frontend/src/components/assistant-ui/thread.tsx +++ b/studio/frontend/src/components/assistant-ui/thread.tsx @@ -342,9 +342,10 @@ const ThreadComposerDock: FC<{ overlay ? "z-40" : "z-20", )} > + {/* Fade the top edge so scrolled text dissolves instead of clipping. */}
diff --git a/studio/frontend/src/index.css b/studio/frontend/src/index.css index 5e24c202e4..5423e5a699 100644 --- a/studio/frontend/src/index.css +++ b/studio/frontend/src/index.css @@ -1082,7 +1082,8 @@ } .unsloth-composer-plus svg { - transition: transform var(--duration-normal) ease-in-out; + /* 250ms reads better than --duration-normal for the plus/x morph. */ + transition: transform 250ms ease-in-out; transform-origin: center; }