Skip to content

Commit 5212b6d

Browse files
andresdjassoclaude
andresdjasso
and
claude
committed
review(knowledge): three candidate depictions, and lead with the create chip
Chip order swapped on both empty states — the primary action reads first, the docs link second. Adds a review-only `knowledge-alternates.tsx` rendered in the preview gallery, because the document-to-chunks graphic is not landing. Three directions: - A. the embedding mesh — the landing hero's own knowledge-base panel already draws a base this way (`stage-kb.tsx`), so this is the house depiction rather than a new invention - B. a stack of documents — the most literal reading, at the cost of colliding with what the files empty state wants to draw - C. a query and the passages that answered it — depicts what a base is for, which is what the description copy actually promises Delete this file and the gallery entries once one is chosen. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
1 parent a0d5219 commit 5212b6d

4 files changed

Lines changed: 162 additions & 6 deletions

File tree

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,17 @@ import {
77
SkillsEmptyState,
88
TablesEmptyState,
99
} from '@/app/workspace/[workspaceId]/components/resource/components/resource-empty-state'
10+
import {
11+
KnowledgeDocumentStack,
12+
KnowledgeGraphMesh,
13+
KnowledgeRetrieval,
14+
} from '@/app/workspace/[workspaceId]/components/resource/components/resource-empty-state/knowledge-alternates'
1015

1116
const ENTRIES = [
17+
{ label: 'KB — current (doc → chunks)', node: <KnowledgeEmptyState onCreate={() => {}} /> },
18+
{ label: 'KB — A. embedding mesh', node: <KnowledgeGraphMesh /> },
19+
{ label: 'KB — B. document stack', node: <KnowledgeDocumentStack /> },
20+
{ label: 'KB — C. query + passages', node: <KnowledgeRetrieval /> },
1221
{ label: 'Knowledge', node: <KnowledgeEmptyState onCreate={() => {}} /> },
1322
{ label: 'Tables', node: <TablesEmptyState onCreate={() => {}} /> },
1423
{ label: 'Logs', node: <LogsEmptyState /> },

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

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
import { Bar } from '@/app/workspace/[workspaceId]/components/resource/components/resource-empty-state/vignette'
2+
3+
/**
4+
* Review-only: three candidate depictions of a knowledge base, rendered side by
5+
* side so the family can be judged before one is adopted. Delete once chosen.
6+
*/
7+
const INK = {
8+
strong: 'color-mix(in srgb, var(--text-secondary) 30%, transparent)',
9+
line: 'color-mix(in srgb, var(--text-secondary) 15%, transparent)',
10+
match: 'color-mix(in srgb, var(--text-secondary) 34%, transparent)',
11+
} as const
12+
13+
const CORNER_FADE =
14+
'[-webkit-mask-image:linear-gradient(to_right,#000_66%,transparent_100%),linear-gradient(to_bottom,#000_70%,transparent_100%)] [mask-image:linear-gradient(to_right,#000_66%,transparent_100%),linear-gradient(to_bottom,#000_70%,transparent_100%)] [-webkit-mask-composite:source-in] [mask-composite:intersect]'
15+
16+
/** A — the embedding mesh, lifted from the landing hero's own knowledge-base panel. */
17+
const GRAPH_NODES = [
18+
{ x: 38, y: 66 },
19+
{ x: 74, y: 104 },
20+
{ x: 96, y: 44 },
21+
{ x: 132, y: 82, hub: true },
22+
{ x: 158, y: 40 },
23+
{ x: 168, y: 116 },
24+
{ x: 206, y: 70, hub: true },
25+
{ x: 228, y: 38 },
26+
{ x: 236, y: 112 },
27+
{ x: 268, y: 72 },
28+
{ x: 300, y: 104, hub: true },
29+
{ x: 312, y: 58 },
30+
{ x: 286, y: 40 },
31+
{ x: 54, y: 96 },
32+
{ x: 140, y: 122 },
33+
{ x: 250, y: 96 },
34+
]
35+
36+
const GRAPH_EDGES: Array<[number, number]> = [
37+
[0, 2],
38+
[0, 13],
39+
[13, 1],
40+
[1, 3],
41+
[2, 3],
42+
[2, 4],
43+
[3, 4],
44+
[3, 5],
45+
[3, 14],
46+
[5, 14],
47+
[4, 6],
48+
[6, 7],
49+
[6, 15],
50+
[6, 8],
51+
[7, 12],
52+
[12, 9],
53+
[9, 15],
54+
[8, 15],
55+
[9, 10],
56+
[8, 10],
57+
[10, 11],
58+
[11, 12],
59+
[9, 11],
60+
]
61+
62+
export function KnowledgeGraphMesh() {
63+
return (
64+
<div aria-hidden='true' className={`relative h-[148px] w-[320px] ${CORNER_FADE}`}>
65+
<svg className='absolute inset-0' viewBox='0 0 340 150' width='320' height='148' fill='none'>
66+
{GRAPH_EDGES.map(([a, b]) => (
67+
<path
68+
key={`${a}-${b}`}
69+
d={`M ${GRAPH_NODES[a].x} ${GRAPH_NODES[a].y} L ${GRAPH_NODES[b].x} ${GRAPH_NODES[b].y}`}
70+
stroke='var(--text-subtle)'
71+
strokeWidth={0.5}
72+
/>
73+
))}
74+
{GRAPH_NODES.map((node, index) => (
75+
<circle
76+
key={`${node.x}-${node.y}`}
77+
cx={node.x}
78+
cy={node.y}
79+
r={node.hub ? 3.4 : index % 3 === 0 ? 2.4 : 1.9}
80+
fill={
81+
node.hub
82+
? 'var(--text-secondary)'
83+
: index % 2 === 0
84+
? 'var(--text-muted)'
85+
: 'var(--text-subtle)'
86+
}
87+
/>
88+
))}
89+
</svg>
90+
</div>
91+
)
92+
}
93+
94+
/** B — a stack of documents, the literal contents of a base. */
95+
export function KnowledgeDocumentStack() {
96+
return (
97+
<div aria-hidden='true' className={`relative h-[148px] w-[320px] ${CORNER_FADE}`}>
98+
{[
99+
{ left: 60, top: 18 },
100+
{ left: 84, top: 36 },
101+
{ left: 108, top: 54 },
102+
].map((offset, index) => (
103+
<div
104+
key={offset.left}
105+
className='absolute h-[80px] w-[112px] rounded-[6px] border border-[var(--border-1)] bg-[var(--bg)] px-3 pt-3'
106+
style={{ left: offset.left, top: offset.top, zIndex: 3 - index }}
107+
>
108+
{[62, 76, 54, 68].map((width, line) => (
109+
<span
110+
key={width}
111+
className='mb-[9px] block h-[5px] rounded-full'
112+
style={{ width, background: line === 0 ? INK.strong : INK.line }}
113+
/>
114+
))}
115+
</div>
116+
))}
117+
</div>
118+
)
119+
}
120+
121+
/** C — a query, and the passages inside a document that answered it. */
122+
export function KnowledgeRetrieval() {
123+
return (
124+
<div aria-hidden='true' className={`relative h-[148px] w-[320px] ${CORNER_FADE}`}>
125+
<div className='absolute top-[16px] left-[46px] flex h-[26px] w-[168px] items-center gap-2 rounded-full border border-[var(--border-1)] px-3'>
126+
<span className='size-[9px] shrink-0 rounded-full border border-[var(--text-subtle)]' />
127+
<Bar className='h-[5px] w-[86px]' style={{ background: INK.strong }} />
128+
</div>
129+
130+
<div className='absolute top-[56px] left-[46px] w-[200px] rounded-[6px] border border-[var(--border-1)] px-3 py-3'>
131+
{[
132+
{ width: 152, match: false },
133+
{ width: 128, match: true },
134+
{ width: 164, match: false },
135+
{ width: 110, match: true },
136+
{ width: 140, match: false },
137+
].map((line, index) => (
138+
<span
139+
key={`${line.width}-${index}`}
140+
className='mb-[9px] block h-[6px] rounded-full'
141+
style={{ width: line.width, background: line.match ? INK.match : INK.line }}
142+
/>
143+
))}
144+
</div>
145+
</div>
146+
)
147+
}

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -114,6 +114,9 @@ export function KnowledgeEmptyState({
114114
description='Upload documents to give your agents a memory they can search.'
115115
action={
116116
<div className='flex items-center gap-2'>
117+
<Chip variant='primary' onClick={onCreate} disabled={createDisabled} leftIcon={Plus}>
118+
New base
119+
</Chip>
117120
<ChipLink
118121
href={KNOWLEDGE_DOCS_URL}
119122
target='_blank'
@@ -123,9 +126,6 @@ export function KnowledgeEmptyState({
123126
>
124127
Docs
125128
</ChipLink>
126-
<Chip variant='primary' onClick={onCreate} disabled={createDisabled} leftIcon={Plus}>
127-
New base
128-
</Chip>
129129
</div>
130130
}
131131
/>

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -116,6 +116,9 @@ export function TablesEmptyState({ onCreate, createDisabled = false }: TablesEmp
116116
description='Create a table to store structured data your agents can read and write.'
117117
action={
118118
<div className='flex items-center gap-2'>
119+
<Chip variant='primary' onClick={onCreate} disabled={createDisabled} leftIcon={Plus}>
120+
New table
121+
</Chip>
119122
<ChipLink
120123
href={TABLES_DOCS_URL}
121124
target='_blank'
@@ -125,9 +128,6 @@ export function TablesEmptyState({ onCreate, createDisabled = false }: TablesEmp
125128
>
126129
Docs
127130
</ChipLink>
128-
<Chip variant='primary' onClick={onCreate} disabled={createDisabled} leftIcon={Plus}>
129-
New table
130-
</Chip>
131131
</div>
132132
}
133133
/>

0 commit comments

Comments
 (0)