style(webui): refine prompt navigator placement

This commit is contained in:
Xubin Ren
2026-06-06 00:19:31 +08:00
parent 860b672e5c
commit 8c9a5259a7
11 changed files with 13 additions and 24 deletions
+13 -14
View File
@@ -6,7 +6,6 @@ import { Button } from "@/components/ui/button";
import {
Sheet,
SheetContent,
SheetDescription,
SheetTitle,
} from "@/components/ui/sheet";
import {
@@ -18,13 +17,11 @@ import type { UIMessage } from "@/lib/types";
import { cn } from "@/lib/utils";
interface PromptNavigatorProps {
bottomOffset: number;
messages: UIMessage[];
onJumpToPrompt: (promptId: string) => void;
}
export function PromptNavigator({
bottomOffset,
messages,
onJumpToPrompt,
}: PromptNavigatorProps) {
@@ -51,16 +48,15 @@ export function PromptNavigator({
return (
<>
<div
className="pointer-events-none absolute right-4 z-20"
style={{ bottom: Math.max(104, bottomOffset + 12) }}
className="pointer-events-none absolute right-3 top-2 z-20"
>
<Button
type="button"
variant="outline"
variant="ghost"
size="icon"
className={cn(
"pointer-events-auto h-8 w-8 rounded-full border-border/70 bg-background/90 shadow-md backdrop-blur",
"text-muted-foreground hover:text-foreground",
"pointer-events-auto h-8 w-8 rounded-full text-muted-foreground/80",
"hover:bg-accent/40 hover:text-foreground",
)}
aria-label={t("thread.promptNavigator.open")}
onClick={() => setOpen(true)}
@@ -72,15 +68,18 @@ export function PromptNavigator({
<Sheet open={open} onOpenChange={setOpen}>
<SheetContent
side="right"
aria-describedby={undefined}
className="w-[min(92vw,24rem)] gap-0 p-0 sm:max-w-[24rem]"
>
<div className="border-b px-5 pb-4 pt-5">
<SheetTitle className="text-base font-medium">
{t("thread.promptNavigator.title")}
</SheetTitle>
<SheetDescription className="mt-1 text-xs">
{t("thread.promptNavigator.description", { count: prompts.length })}
</SheetDescription>
<div className="flex items-center justify-between gap-3">
<SheetTitle className="text-base font-medium">
{t("thread.promptNavigator.title")}
</SheetTitle>
<span className="rounded-full bg-muted px-2 py-0.5 text-xs text-muted-foreground">
{prompts.length}
</span>
</div>
<div className="relative mt-4">
<Search
aria-hidden
@@ -334,7 +334,6 @@ export function ThreadViewport({
<PromptNavigator
messages={messages}
onJumpToPrompt={jumpToUserPrompt}
bottomOffset={scrollButtonBottom}
/>
) : null}
-1
View File
@@ -779,7 +779,6 @@
"promptNavigator": {
"open": "Open prompt navigator",
"title": "Prompts",
"description": "{{count}} user prompts",
"search": "Search prompts",
"noResults": "No matching prompts.",
"jumpTo": "Jump to prompt: {{label}}",
-1
View File
@@ -779,7 +779,6 @@
"promptNavigator": {
"open": "Abrir navegador de prompts",
"title": "Prompts",
"description": "{{count}} prompts del usuario",
"search": "Buscar prompts",
"noResults": "No hay prompts coincidentes.",
"jumpTo": "Ir al prompt: {{label}}",
-1
View File
@@ -779,7 +779,6 @@
"promptNavigator": {
"open": "Ouvrir le navigateur de prompts",
"title": "Prompts",
"description": "{{count}} prompts utilisateur",
"search": "Rechercher des prompts",
"noResults": "Aucun prompt correspondant.",
"jumpTo": "Aller au prompt : {{label}}",
-1
View File
@@ -779,7 +779,6 @@
"promptNavigator": {
"open": "Buka navigator prompt",
"title": "Prompt",
"description": "{{count}} prompt pengguna",
"search": "Cari prompt",
"noResults": "Tidak ada prompt yang cocok.",
"jumpTo": "Lompat ke prompt: {{label}}",
-1
View File
@@ -779,7 +779,6 @@
"promptNavigator": {
"open": "プロンプトナビゲーターを開く",
"title": "プロンプト",
"description": "{{count}} 件のユーザープロンプト",
"search": "プロンプトを検索",
"noResults": "一致するプロンプトがありません。",
"jumpTo": "プロンプトへ移動: {{label}}",
-1
View File
@@ -779,7 +779,6 @@
"promptNavigator": {
"open": "프롬프트 탐색기 열기",
"title": "프롬프트",
"description": "사용자 프롬프트 {{count}}개",
"search": "프롬프트 검색",
"noResults": "일치하는 프롬프트가 없습니다.",
"jumpTo": "프롬프트로 이동: {{label}}",
-1
View File
@@ -779,7 +779,6 @@
"promptNavigator": {
"open": "Mở trình điều hướng prompt",
"title": "Prompt",
"description": "{{count}} prompt của người dùng",
"search": "Tìm prompt",
"noResults": "Không có prompt phù hợp.",
"jumpTo": "Nhảy tới prompt: {{label}}",
-1
View File
@@ -779,7 +779,6 @@
"promptNavigator": {
"open": "打开输入导航",
"title": "输入列表",
"description": "{{count}} 条用户输入",
"search": "搜索输入",
"noResults": "没有匹配的输入。",
"jumpTo": "跳转到输入:{{label}}",
-1
View File
@@ -779,7 +779,6 @@
"promptNavigator": {
"open": "開啟輸入導覽",
"title": "輸入列表",
"description": "{{count}} 則使用者輸入",
"search": "搜尋輸入",
"noResults": "沒有符合的輸入。",
"jumpTo": "跳到輸入:{{label}}",