Skip to content

Commit ede762f

Browse files
waleedlatif1waleedlatif1
authored
feat(knowledge): empty state for a base that holds no documents (#6855)
#6828 gave the four workspace resource lists a zero-data graphic and left the one list a level below them still painting column headers over a blank body — the list every user meets immediately, because creating a base does not require a file and does not navigate anywhere on success. The mark is a stack of sheets with the front one dog-eared and ruled. The dog-ear is the one signifier the set does not already use: the folder is a container and the knowledge mark is a shelf of volumes, and this has to read as the pages inside one of them rather than as either. It reuses the rest of the recipe — hairline contours, the surface ramp for depth, ink mixed off `--text-secondary` because the ramp is near-white in light mode, and a fade running the direction the stack recedes. `HAIRLINE` was byte-identical between the folder and this mark, so it moves to a shared module beside `mask.ts`. Visibility goes through the same `isResourceListEmpty` the four pages use, with one difference the call site documents: it counts the server's `total` rather than the visible rows, because this list is paginated and an empty page 2 is a paging position, not an empty base. The folder arguments are omitted — a base's documents are flat. The frame is derived from the artwork's bounds rather than a round-numbered viewBox. The sheets step up and to the right, which left the drawn mass far enough off-centre that the mark sat visibly right of the copy beneath it.
1 parent 7167ed6 commit ede762f

5 files changed

Lines changed: 187 additions & 15 deletions

File tree

‎apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-empty-state/documents-empty-state.tsx‎

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
import { Chip, cn } from '@sim/emcn'
2+
import { Plus } from '@sim/emcn/icons'
3+
import { EmptyState } from '@/components/empty-state/empty-state'
4+
import { EmptyStateDocsLink } from '@/app/workspace/[workspaceId]/components/resource/components/resource-empty-state/docs-link'
5+
import { HAIRLINE } from '@/app/workspace/[workspaceId]/components/resource/components/resource-empty-state/hairline'
6+
import { MASK_NO_REPEAT } from '@/app/workspace/[workspaceId]/components/resource/components/resource-empty-state/mask'
7+
8+
const KNOWLEDGE_DOCS_URL = 'https://docs.sim.ai/knowledgebase'
9+
10+
/**
11+
* Ruled text — see the `INK` note in `tables-empty-state.tsx` for why not the surface
12+
* ramp. The heading line takes the stronger mix so the sheet reads as a document
13+
* rather than as blank ruling.
14+
*/
15+
const INK = {
16+
heading: 'color-mix(in srgb, var(--text-secondary) 30%, transparent)',
17+
body: 'color-mix(in srgb, var(--text-secondary) 15%, transparent)',
18+
} as const
19+
20+
/** Widths of the ruled body lines, in viewBox units. */
21+
const BODY_LINES = [
22+
{ y: 84, width: 62 },
23+
{ y: 98, width: 54 },
24+
{ y: 112, width: 66 },
25+
] as const
26+
27+
/**
28+
* The front sheet, with the top-right corner turned back.
29+
*
30+
* The dog-ear is the one signifier no other graphic in the set uses — the folder is a
31+
* container, the knowledge mark is a shelf of volumes, and this has to read as the
32+
* pages inside one of them.
33+
*/
34+
const SHEET = [
35+
'M 58 34',
36+
'H 128',
37+
'L 148 54',
38+
'V 140',
39+
'Q 148 146 142 146',
40+
'H 58',
41+
'Q 52 146 52 140',
42+
'V 40',
43+
'Q 52 34 58 34',
44+
'Z',
45+
].join(' ')
46+
47+
/** The turned-back corner itself, drawn over the sheet so its two edges both read. */
48+
const DOG_EAR = ['M 128 34', 'L 148 54', 'H 134', 'Q 128 54 128 48', 'Z'].join(' ')
49+
50+
/**
51+
* Dissolves upward, the direction the stack recedes — the same call the folder makes.
52+
* The sheets behind are a repeating structure and cost nothing cropped, while the front
53+
* sheet stays crisp where the copy begins beneath it.
54+
*/
55+
const STACK_FADE =
56+
'[-webkit-mask-image:linear-gradient(to_top,#000_56%,transparent_100%)] [mask-image:linear-gradient(to_top,#000_56%,transparent_100%)]'
57+
58+
/**
59+
* The artwork's own bounds, so the frame follows the drawing rather than a round number.
60+
*
61+
* The sheets are authored around the front sheet's origin and step up and to the right,
62+
* which leaves the drawn mass off-centre inside any round-numbered viewBox — enough that
63+
* the mark sat visibly right of the copy beneath it. Framing on these bounds centres the
64+
* two. They are read off the shapes below by hand, so retuning the stack means updating
65+
* them here.
66+
*/
67+
const ART = { minX: 52, maxX: 166, minY: 18, maxY: 146 } as const
68+
const ART_PADDING = 10
69+
const VIEW_BOX_WIDTH = ART.maxX - ART.minX + ART_PADDING * 2
70+
const VIEW_BOX_HEIGHT = ART.maxY - ART.minY + ART_PADDING * 2
71+
const VIEW_BOX = `${ART.minX - ART_PADDING} ${ART.minY - ART_PADDING} ${VIEW_BOX_WIDTH} ${VIEW_BOX_HEIGHT}`
72+
73+
/** Matches the other resource graphics, so the set centres as one collection. */
74+
const MARK_HEIGHT = 148
75+
76+
/**
77+
* A stack of sheets, the front one dog-eared and ruled. The two behind it step up and
78+
* to the right, so the stack reads as depth rather than as a single thick page.
79+
*/
80+
function DocumentsGraphic() {
81+
return (
82+
<svg
83+
viewBox={VIEW_BOX}
84+
width={(MARK_HEIGHT * VIEW_BOX_WIDTH) / VIEW_BOX_HEIGHT}
85+
height={MARK_HEIGHT}
86+
fill='none'
87+
aria-hidden='true'
88+
focusable='false'
89+
className={cn('block max-w-none shrink-0', STACK_FADE, MASK_NO_REPEAT)}
90+
>
91+
<rect x='70' y='18' width='96' height='112' rx='6' fill='var(--surface-4)' {...HAIRLINE} />
92+
<rect x='61' y='26' width='96' height='112' rx='6' fill='var(--surface-3)' {...HAIRLINE} />
93+
94+
<path d={SHEET} fill='var(--surface-2)' {...HAIRLINE} />
95+
<path d={DOG_EAR} fill='var(--surface-4)' {...HAIRLINE} />
96+
97+
<rect x='68' y='64' width='44' height='6' rx='3' fill={INK.heading} />
98+
{BODY_LINES.map((line) => (
99+
<rect
100+
key={line.y}
101+
x='68'
102+
y={line.y}
103+
width={line.width}
104+
height='5'
105+
rx='2.5'
106+
fill={INK.body}
107+
/>
108+
))}
109+
</svg>
110+
)
111+
}
112+
113+
interface DocumentsEmptyStateProps {
114+
/** Opens the file picker — the same action the header's primary chip runs. */
115+
onAddDocuments: () => void
116+
/** Mirrors the header chip's disabled state: no edit rights on the workspace. */
117+
addDisabled?: boolean
118+
}
119+
120+
/** Empty state for a knowledge base that holds no documents yet. */
121+
export function DocumentsEmptyState({
122+
onAddDocuments,
123+
addDisabled = false,
124+
}: DocumentsEmptyStateProps) {
125+
return (
126+
<EmptyState
127+
graphic={<DocumentsGraphic />}
128+
title='Documents'
129+
description='Upload documents so your agents can search this base.'
130+
action={
131+
<>
132+
<Chip variant='primary' onClick={onAddDocuments} disabled={addDisabled} leftIcon={Plus}>
133+
New documents
134+
</Chip>
135+
<EmptyStateDocsLink href={KNOWLEDGE_DOCS_URL} />
136+
</>
137+
}
138+
/>
139+
)
140+
}

‎apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-empty-state/files-empty-state.tsx‎

Lines changed: 1 addition & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,25 +2,11 @@ import { Chip, cn } from '@sim/emcn'
22
import { Upload } from '@sim/emcn/icons'
33
import { EmptyState } from '@/components/empty-state/empty-state'
44
import { EmptyStateDocsLink } from '@/app/workspace/[workspaceId]/components/resource/components/resource-empty-state/docs-link'
5+
import { HAIRLINE } from '@/app/workspace/[workspaceId]/components/resource/components/resource-empty-state/hairline'
56
import { MASK_NO_REPEAT } from '@/app/workspace/[workspaceId]/components/resource/components/resource-empty-state/mask'
67

78
const FILES_DOCS_URL = 'https://docs.sim.ai/files'
89

9-
/**
10-
* Hairline contours, matching the tables grid's 1px `--border` rules and the
11-
* knowledge mark's thinned strokes — the graphics sit one nav item apart, so a
12-
* heavier outline here would read as a different illustration system.
13-
*
14-
* Fills stay near the top of the surface ramp for the same reason: the border
15-
* draws the folder and the fill only has to separate one layer from the next. A
16-
* solid mid-grey body made this the heaviest thing on the page.
17-
*/
18-
const HAIRLINE = {
19-
stroke: 'var(--border)',
20-
strokeWidth: 1.1,
21-
strokeLinejoin: 'round' as const,
22-
} as const
23-
2410
const FOLDER_BACK = [
2511
'M 22 34',
2612
'H 66',

‎apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-empty-state/hairline.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
/**
2+
* The contour weight every drawn resource graphic shares.
3+
*
4+
* Matches the tables grid's 1px `--border` rules and the knowledge mark's thinned
5+
* strokes — the graphics sit a nav level apart, so a heavier outline on any one of
6+
* them reads as a different illustration system.
7+
*
8+
* Fills stay near the top of the surface ramp for the same reason: the border draws
9+
* the shape and the fill only has to separate one layer from the next.
10+
*/
11+
export const HAIRLINE = {
12+
stroke: 'var(--border)',
13+
strokeWidth: 1.1,
14+
strokeLinejoin: 'round' as const,
15+
} as const

‎apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-empty-state/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
export { DocumentsEmptyState } from '@/app/workspace/[workspaceId]/components/resource/components/resource-empty-state/documents-empty-state'
12
export { FilesEmptyState } from '@/app/workspace/[workspaceId]/components/resource/components/resource-empty-state/files-empty-state'
23
export { KnowledgeEmptyState } from '@/app/workspace/[workspaceId]/components/resource/components/resource-empty-state/knowledge-empty-state'
34
export { LogsEmptyState } from '@/app/workspace/[workspaceId]/components/resource/components/resource-empty-state/logs-empty-state'

‎apps/sim/app/workspace/[workspaceId]/knowledge/[id]/base.tsx‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,7 @@ import type {
6161
import {
6262
FILTER_SECTION_LABEL_CLASS,
6363
FloatingOverflowText,
64+
isResourceListEmpty,
6465
Resource,
6566
} from '@/app/workspace/[workspaceId]/components'
6667
import {
@@ -69,6 +70,7 @@ import {
6970
folderedResourceListHref,
7071
useFolderAncestors,
7172
} from '@/app/workspace/[workspaceId]/components/folders'
73+
import { DocumentsEmptyState } from '@/app/workspace/[workspaceId]/components/resource/components/resource-empty-state'
7274
import { DocumentTagsModal } from '@/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components'
7375
import {
7476
ActionBar,
@@ -411,6 +413,7 @@ export function KnowledgeBase({
411413
const {
412414
documents,
413415
pagination,
416+
isLoading: isLoadingDocuments,
414417
isPlaceholderData: isPlaceholderDocuments,
415418
error: documentsError,
416419
hasProcessingDocuments,
@@ -1145,6 +1148,25 @@ export function KnowledgeBase({
11451148
[enabledFilter, tagFilterEntries]
11461149
)
11471150

1151+
/**
1152+
* The zero-data graphic is for a base that holds no documents — not a search or a
1153+
* filter that matched nothing, and not a page past the last one. Counts on the
1154+
* server's `total` rather than the visible rows, because this list is paginated:
1155+
* an empty page 2 is a paging position, not an empty base.
1156+
*
1157+
* The remaining gates mirror the workspace resource pages — the list must have
1158+
* arrived, must not be serving the previous query key's rows, and must not have
1159+
* failed. This list has no folders, so the folder arguments are omitted.
1160+
*/
1161+
const showEmptyState = isResourceListEmpty({
1162+
rowCount: pagination.total,
1163+
isLoading: isLoadingDocuments,
1164+
isPlaceholderData: isPlaceholderDocuments,
1165+
error: documentsError,
1166+
search: debouncedSearchQuery,
1167+
filterCount: filterTags.length,
1168+
})
1169+
11481170
const selectableConfig: SelectableConfig = {
11491171
selectedIds: selectedDocuments,
11501172
onSelectRow: handleSelectDocument,
@@ -1271,6 +1293,14 @@ export function KnowledgeBase({
12711293
<Resource.Table
12721294
columns={DOCUMENT_COLUMNS}
12731295
rows={documentRows}
1296+
emptyState={
1297+
showEmptyState ? (
1298+
<DocumentsEmptyState
1299+
onAddDocuments={handleAddDocuments}
1300+
addDisabled={userPermissions.canEdit !== true}
1301+
/>
1302+
) : undefined
1303+
}
12741304
selectable={selectableConfig}
12751305
onRowClick={handleDocumentClick}
12761306
onRowContextMenu={handleDocumentContextMenu}

0 commit comments

Comments
 (0)