mirror/nanobot
1
0
Fork 0
mirror of https://github.com/HKUDS/nanobot.git synced 2026-06-15 07:14:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(webui): align inline file references with text

Browse Source
This commit is contained in:
Xubin Ren 2026-05-24 17:53:56 +08:00
parent 6ea7a6a2ac
commit 00a6e720dc
2 changed files with 32 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
webui/src/components/FileReferenceChip.tsx
View File

@ -51,7 +51,7 @@ export function FileReferenceChip({
data-testid={testId} data-testid={testId}
aria-label={fullPath} aria-label={fullPath}
className={cn( className={cn(
"inline-flex max-w-full items-center gap-1 font-medium leading-[inherit]", "inline-flex max-w-full items-baseline gap-[0.28em] font-medium leading-[inherit]",
"text-sky-600 transition-colors hover:text-sky-700", "text-sky-600 transition-colors hover:text-sky-700",
"dark:text-sky-300 dark:hover:text-sky-200", "dark:text-sky-300 dark:hover:text-sky-200",
)} )}
@ -161,7 +161,7 @@ function FileReferenceIcon({ kind }: { kind: FileReferenceKind }) {
return ( return (
<svg <svg
aria-hidden aria-hidden
className="h-[0.98em] w-[0.98em] shrink-0 text-sky-500 dark:text-sky-300" className="h-[0.92em] w-[0.92em] shrink-0 translate-y-[0.11em] text-sky-500 dark:text-sky-300"
viewBox="0 0 24 24" viewBox="0 0 24 24"
fill="none" fill="none"
stroke="currentColor" stroke="currentColor"
@ -180,7 +180,7 @@ function FileReferenceIcon({ kind }: { kind: FileReferenceKind }) {
return ( return (
<svg <svg
aria-hidden aria-hidden
className="h-[0.98em] w-[0.98em] shrink-0 text-sky-500 dark:text-sky-300" className="h-[0.92em] w-[0.92em] shrink-0 translate-y-[0.11em] text-sky-500 dark:text-sky-300"
viewBox="0 0 24 24" viewBox="0 0 24 24"
fill="none" fill="none"
stroke="currentColor" stroke="currentColor"
@ -195,16 +195,36 @@ function FileReferenceIcon({ kind }: { kind: FileReferenceKind }) {
} }
const label = fileKindLabel(kind); const label = fileKindLabel(kind);
return ( return (
<span <svg
aria-hidden aria-hidden
className={cn( className="h-[0.96em] w-[0.96em] shrink-0 translate-y-[0.12em] text-sky-500 dark:text-sky-300"
"inline-flex h-[1.05em] min-w-[1.05em] shrink-0 items-center justify-center", viewBox="0 0 24 24"
"rounded-[4px] bg-sky-500/12 px-[0.22em] text-[0.58em] font-bold uppercase leading-none", fill="none"
"text-sky-600 dark:bg-sky-400/15 dark:text-sky-300",
)}
> >
{label} <path
</span> d="M7 3.5h6.6L18 7.9V19a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 6 19V5a1.5 1.5 0 0 1 1.5-1.5Z"
fill="currentColor"
opacity="0.12"
/>
<path
d="M13.5 3.75V8h4.25M7 3.5h6.6L18 7.9V19a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 6 19V5a1.5 1.5 0 0 1 1.5-1.5Z"
stroke="currentColor"
strokeWidth="1.75"
strokeLinecap="round"
strokeLinejoin="round"
/>
<text
x="12"
y="15.7"
textAnchor="middle"
fill="currentColor"
fontSize={label.length > 1 ? "5.8" : "7.2"}
fontWeight="800"
letterSpacing="-0.2"
>
{label}
</text>
</svg>
); );
} }

1
webui/src/tests/message-bubble.test.tsx
View File

@ -319,6 +319,7 @@ describe("MessageBubble", () => {
expect(references[0].parentElement).not.toHaveClass("translate-y-[0.08em]"); expect(references[0].parentElement).not.toHaveClass("translate-y-[0.08em]");
expect(references[0].parentElement).toHaveClass("align-baseline"); expect(references[0].parentElement).toHaveClass("align-baseline");
expect(references[0].parentElement).toHaveClass("leading-[inherit]"); expect(references[0].parentElement).toHaveClass("leading-[inherit]");
expect(references[0]).toHaveClass("items-baseline");
expect(references[0]).toHaveTextContent("MarkdownTextRenderer.tsx"); expect(references[0]).toHaveTextContent("MarkdownTextRenderer.tsx");
expect(references[0]).not.toHaveTextContent("webui/src/components"); expect(references[0]).not.toHaveTextContent("webui/src/components");
expect(screen.getByText("index.html")).toBeInTheDocument(); expect(screen.getByText("index.html")).toBeInTheDocument();