@@ -178,7 +280,14 @@ export function ChunksPanel({
{isLoading ? (
) : chunks.length === 0 ? (
-
+ selectedSource ? (
+
+ ) : (
+
+ )
) : (
void;
+ readonly onNext: () => void;
+ readonly onPrevious: () => void;
+ readonly onQueryChange: (query: string) => void;
+}): ReactNode {
+ const searchInputId = useId();
+ const hasQuery = query.trim().length > 0;
+ const hasMatches = matchCount > 0;
+ const resultLabel = getSearchResultLabel({
+ activeMatchOrdinal,
+ hasQuery,
+ matchCount,
+ totalHitCount,
+ });
+
+ return (
+
+
+ Search parsed chunks
+
+
+
+
+ ) : null}
+
+
+ {resultLabel}
+
+
+
+
+
+
+
+
+ );
+}
+
+function getSearchResultLabel({
+ activeMatchOrdinal,
+ hasQuery,
+ matchCount,
+ totalHitCount,
+}: {
+ readonly activeMatchOrdinal: number;
+ readonly hasQuery: boolean;
+ readonly matchCount: number;
+ readonly totalHitCount: number;
+}): string {
+ if (!hasQuery) return "Search chunks";
+ if (matchCount === 0) return "No matches";
+
+ const hitLabel = totalHitCount === 1 ? "hit" : "hits";
+ return `${activeMatchOrdinal}/${matchCount} chunks · ${totalHitCount} ${hitLabel}`;
+}
+
+function getRelativeSearchMatchIndex(
+ currentIndex: number,
+ matches: readonly ChunkSearchMatch[],
+ delta: number,
+): number {
+ if (matches.length === 0) return -1;
+
+ const startingIndex = currentIndex >= 0 ? currentIndex : 0;
+ return (startingIndex + delta + matches.length) % matches.length;
+}
+
+function getEffectiveSearchMatchIndex(
+ currentIndex: number,
+ matches: readonly ChunkSearchMatch[],
+ normalizedSearchQuery: string,
+): number {
+ if (!normalizedSearchQuery || matches.length === 0) return -1;
+ if (currentIndex < 0) return 0;
+ return Math.min(currentIndex, matches.length - 1);
+}
+
+const searchNavigationButtonClassName =
+ "flex size-8 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-background hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#8e51ff]/25 disabled:pointer-events-none disabled:opacity-40";
+
+function EmptySourceUploadState({
+ onLoginClick,
+ onSourceUploaded,
+}: {
+ readonly onLoginClick?: () => void;
+ readonly onSourceUploaded?: (source: SourceView) => void;
+}): ReactNode {
+ if (onLoginClick) {
+ return (
+
+
+ Log in to add documents
+
+
+ Add your first source to see parsed chunks and ask questions from this
+ workspace.
+
+
+ );
+ }
+
+ if (!onSourceUploaded) {
+ return
;
+ }
+
+ return (
+
(
+
+
+ Upload a document
+
+
+ Click to choose a file, or drag a document here to prepare it for
+ parsed chunks and chat.
+
+
+ PDF, DOCX, TXT, MD, spreadsheets, slides, and images up to 100 MB
+
+
+ )}
+ />
+ );
+}
+
+function EmptyUploadPicture(): ReactNode {
+ return (
+
+
+
+
+
+
+ );
+}
+
+const emptyUploadTargetClassName =
+ "mx-auto flex min-h-[440px] w-full max-w-2xl cursor-pointer flex-col items-center justify-center gap-3 rounded-lg border-2 border-dashed border-border bg-background-secondary/70 px-6 py-10 text-center transition-colors hover:border-[#8e51ff]/60 hover:bg-accent/80 focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-[#8e51ff]/15 dark:bg-background-secondary/80";
+
function ViewPanel({
children,
isActive,
@@ -291,6 +614,7 @@ function VirtualChunkRow({
chunk,
focusedChunkId,
isOriginalPreviewAvailable,
+ searchQuery,
measureElement,
onChunkClick,
onReferenceClick,
@@ -299,6 +623,7 @@ function VirtualChunkRow({
chunk: ParsedChunkView | undefined;
focusedChunkId: string | null;
isOriginalPreviewAvailable: boolean;
+ searchQuery: string;
measureElement: (node: HTMLDivElement | null) => void;
onChunkClick?: (chunk: ParsedChunkView) => void;
onReferenceClick: (chunkId: string) => void;
@@ -326,6 +651,7 @@ function VirtualChunkRow({
chunk={chunk}
isFocused={chunk.chunkId === focusedChunkId}
isOriginalPreviewAvailable={isOriginalPreviewAvailable}
+ searchQuery={searchQuery}
onChunkClick={onChunkClick}
onReferenceClick={onReferenceClick}
/>
diff --git a/src/components/notebook-logo-mark.tsx b/src/components/notebook-logo-mark.tsx
index a834703..1b3f58a 100644
--- a/src/components/notebook-logo-mark.tsx
+++ b/src/components/notebook-logo-mark.tsx
@@ -1,13 +1,8 @@
import Image from "next/image";
-// Base dimensions from the tablet-sized sidebar brand mark
-const BASE = {
- containerWidth: 28,
- containerHeight: 25.46,
- markWidth: 14.97,
- markHeight: 19.78,
- secondaryLeft: 13.03,
- secondaryTop: 5.68,
+const DASHBOARD_MARK = {
+ height: 84,
+ width: 92,
} as const;
type NotebookLogoMarkProps = {
@@ -16,40 +11,16 @@ type NotebookLogoMarkProps = {
};
export function NotebookLogoMark({ width, className }: NotebookLogoMarkProps) {
- const scale = width / BASE.containerWidth;
- const containerHeight = BASE.containerHeight * scale;
- const markWidth = BASE.markWidth * scale;
- const markHeight = BASE.markHeight * scale;
- const secondaryLeft = BASE.secondaryLeft * scale;
- const secondaryTop = BASE.secondaryTop * scale;
+ const height = width * (DASHBOARD_MARK.height / DASHBOARD_MARK.width);
return (
-
-
+ width={width}
+ height={height}
+ />
);
}
diff --git a/src/components/parsed-chunk-card.test.ts b/src/components/parsed-chunk-card.test.ts
index 1636f77..85283f7 100644
--- a/src/components/parsed-chunk-card.test.ts
+++ b/src/components/parsed-chunk-card.test.ts
@@ -12,7 +12,7 @@ describe("ParsedChunkCard", () => {
});
it("renders text chunks with source, summary, content, and keywords", () => {
- render(
+ const { container } = render(
React.createElement(ParsedChunkCard, {
chunk: {
chunkId: "text_1",
@@ -24,6 +24,7 @@ describe("ParsedChunkCard", () => {
keywords: ["Supercharging", "AI training capacity"],
},
isFocused: true,
+ searchQuery: "capacity",
onReferenceClick: vi.fn(),
}),
);
@@ -43,6 +44,9 @@ describe("ParsedChunkCard", () => {
expect(screen.getByTestId("chunk-card-shell-text_1").className).toContain(
"min-w-0",
);
+ expect(
+ container.querySelectorAll('mark[data-chunk-search-match="true"]').length,
+ ).toBeGreaterThan(0);
});
it("routes resolved artifact reference clicks to the target chunk", async () => {
diff --git a/src/components/parsed-chunk-card.tsx b/src/components/parsed-chunk-card.tsx
index dbe8e25..18921fd 100644
--- a/src/components/parsed-chunk-card.tsx
+++ b/src/components/parsed-chunk-card.tsx
@@ -23,12 +23,14 @@ export function ParsedChunkCard({
chunk,
isFocused,
isOriginalPreviewAvailable = false,
+ searchQuery = "",
onChunkClick,
onReferenceClick,
}: {
readonly chunk: ParsedChunkView;
readonly isFocused: boolean;
readonly isOriginalPreviewAvailable?: boolean;
+ readonly searchQuery?: string;
readonly onChunkClick?: (chunk: ParsedChunkView) => void;
readonly onReferenceClick: (chunkId: string) => void;
}): ReactNode {
@@ -39,6 +41,7 @@ export function ParsedChunkCard({
chunk={chunk}
isFocused={isFocused}
isOriginalPreviewAvailable={isOriginalPreviewAvailable}
+ searchQuery={searchQuery}
onChunkClick={onChunkClick}
/>
@@ -51,6 +54,7 @@ export function ParsedChunkCard({
chunk={chunk}
isFocused={isFocused}
isOriginalPreviewAvailable={isOriginalPreviewAvailable}
+ searchQuery={searchQuery}
onChunkClick={onChunkClick}
/>
@@ -62,6 +66,7 @@ export function ParsedChunkCard({
chunk={chunk}
isFocused={isFocused}
isOriginalPreviewAvailable={isOriginalPreviewAvailable}
+ searchQuery={searchQuery}
onChunkClick={onChunkClick}
onReferenceClick={onReferenceClick}
/>
@@ -225,8 +230,10 @@ function getOpenOriginalButtonLabel(
function ChunkSummaryPanel({
chunk,
+ searchQuery,
}: {
readonly chunk: ParsedChunkView;
+ readonly searchQuery: string;
}): ReactNode {
if (!chunk.summary) return null;
@@ -236,7 +243,9 @@ function ChunkSummaryPanel({
className="rounded-lg border border-border/70 bg-muted/35 p-3"
>
{chunk.summary}
+
+ {renderHighlightedSearchText(chunk.summary, searchQuery)}
+
);
}
@@ -261,8 +270,10 @@ function ChunkContentPanel({
function ChunkKeywords({
chunk,
+ searchQuery,
}: {
readonly chunk: ParsedChunkView;
+ readonly searchQuery: string;
}): ReactNode {
if (!chunk.keywords || chunk.keywords.length === 0) return null;
@@ -284,7 +295,7 @@ function ChunkKeywords({
variant="secondary"
className={keywordBadgeClassName}
>
- {keyword}
+ {renderHighlightedSearchText(keyword, searchQuery)}
))}
@@ -320,12 +331,14 @@ function TextChunkCard({
chunk,
isFocused,
isOriginalPreviewAvailable,
+ searchQuery,
onChunkClick,
onReferenceClick,
}: {
readonly chunk: ParsedChunkView;
readonly isFocused: boolean;
readonly isOriginalPreviewAvailable: boolean;
+ readonly searchQuery: string;
readonly onChunkClick?: (chunk: ParsedChunkView) => void;
readonly onReferenceClick: (chunkId: string) => void;
}): ReactNode {
@@ -336,13 +349,13 @@ function TextChunkCard({
isOriginalPreviewAvailable={isOriginalPreviewAvailable}
onChunkClick={onChunkClick}
>
-
+
- {renderTextChunkContent(chunk, onReferenceClick)}
+ {renderTextChunkContent(chunk, searchQuery, onReferenceClick)}
-
+
);
}
@@ -351,11 +364,13 @@ function ImageChunkCard({
chunk,
isFocused,
isOriginalPreviewAvailable,
+ searchQuery,
onChunkClick,
}: {
readonly chunk: ParsedChunkView;
readonly isFocused: boolean;
readonly isOriginalPreviewAvailable: boolean;
+ readonly searchQuery: string;
readonly onChunkClick?: (chunk: ParsedChunkView) => void;
}): ReactNode {
return (
@@ -365,7 +380,7 @@ function ImageChunkCard({
isOriginalPreviewAvailable={isOriginalPreviewAvailable}
onChunkClick={onChunkClick}
>
-
+
{chunk.assetUrl ? (
@@ -384,26 +399,33 @@ function ImageChunkCard({
Image chunk
- {chunk.summary ?? "Image content is not available in this view."}
+ {chunk.summary
+ ? renderHighlightedSearchText(chunk.summary, searchQuery)
+ : "Image content is not available in this view."}