Skip to content

Commit 17c12ea

Browse files
emir-karabegemir-karabeg
committed
improvement(home): templates
1 parent bf8d159 commit 17c12ea

File tree

6 files changed

+219
-42
lines changed

6 files changed

+219
-42
lines changed

‎apps/docs/app/layout.tsx‎

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,21 @@
11
import type { ReactNode } from 'react'
2+
import type { Viewport } from 'next'
23

34
export default function RootLayout({ children }: { children: ReactNode }) {
45
return children
56
}
67

8+
export const viewport: Viewport = {
9+
width: 'device-width',
10+
initialScale: 1,
11+
maximumScale: 1,
12+
userScalable: false,
13+
themeColor: [
14+
{ media: '(prefers-color-scheme: light)', color: '#ffffff' },
15+
{ media: '(prefers-color-scheme: dark)', color: '#0c0c0c' },
16+
],
17+
}
18+
719
export const metadata = {
820
metadataBase: new URL('https://docs.sim.ai'),
921
title: {
@@ -12,6 +24,9 @@ export const metadata = {
1224
},
1325
description:
1426
'Documentation for Sim — the open-source platform to build AI agents and run your agentic workforce. Connect 1,000+ integrations and LLMs to deploy and orchestrate agentic workflows.',
27+
applicationName: 'Sim Docs',
28+
generator: 'Next.js',
29+
referrer: 'origin-when-cross-origin' as const,
1530
keywords: [
1631
'AI agents',
1732
'agentic workforce',
@@ -37,17 +52,28 @@ export const metadata = {
3752
manifest: '/favicon/site.webmanifest',
3853
icons: {
3954
icon: [
55+
{ url: '/icon.svg', type: 'image/svg+xml', sizes: 'any' },
4056
{ url: '/favicon/favicon-16x16.png', sizes: '16x16', type: 'image/png' },
4157
{ url: '/favicon/favicon-32x32.png', sizes: '32x32', type: 'image/png' },
58+
{ url: '/favicon/android-chrome-192x192.png', sizes: '192x192', type: 'image/png' },
59+
{ url: '/favicon/android-chrome-512x512.png', sizes: '512x512', type: 'image/png' },
4260
],
4361
apple: '/favicon/apple-touch-icon.png',
44-
shortcut: '/favicon/favicon.ico',
62+
shortcut: '/icon.svg',
4563
},
4664
appleWebApp: {
4765
capable: true,
4866
statusBarStyle: 'default',
4967
title: 'Sim Docs',
5068
},
69+
formatDetection: {
70+
telephone: false,
71+
},
72+
other: {
73+
'apple-mobile-web-app-capable': 'yes',
74+
'mobile-web-app-capable': 'yes',
75+
'msapplication-TileColor': '#33C482',
76+
},
5177
openGraph: {
5278
type: 'website',
5379
locale: 'en_US',

‎apps/docs/public/favicon/site.webmanifest‎

Lines changed: 27 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,42 @@
11
{
2-
"name": "MyWebSite",
3-
"short_name": "MySite",
2+
"name": "Sim Documentation — Build AI Agents & Run Your Agentic Workforce",
3+
"short_name": "Sim Docs",
4+
"description": "Documentation for Sim — the open-source platform to build AI agents and run your agentic workforce. Connect 1,000+ integrations and LLMs to deploy and orchestrate agentic workflows.",
5+
"start_url": "/",
6+
"scope": "/",
47
"icons": [
58
{
6-
"src": "/web-app-manifest-192x192.png",
9+
"src": "/favicon/web-app-manifest-192x192.png",
710
"sizes": "192x192",
811
"type": "image/png",
912
"purpose": "maskable"
1013
},
1114
{
12-
"src": "/web-app-manifest-512x512.png",
15+
"src": "/favicon/web-app-manifest-512x512.png",
1316
"sizes": "512x512",
1417
"type": "image/png",
1518
"purpose": "maskable"
19+
},
20+
{
21+
"src": "/favicon/android-chrome-192x192.png",
22+
"sizes": "192x192",
23+
"type": "image/png"
24+
},
25+
{
26+
"src": "/favicon/android-chrome-512x512.png",
27+
"sizes": "512x512",
28+
"type": "image/png"
29+
},
30+
{
31+
"src": "/favicon/apple-touch-icon.png",
32+
"sizes": "180x180",
33+
"type": "image/png"
1634
}
1735
],
18-
"theme_color": "#ffffff",
36+
"theme_color": "#33C482",
1937
"background_color": "#ffffff",
20-
"display": "standalone"
38+
"display": "standalone",
39+
"categories": ["productivity", "developer", "business"],
40+
"lang": "en-US",
41+
"dir": "ltr"
2142
}

‎apps/docs/public/icon.svg‎

Lines changed: 14 additions & 0 deletions
Loading

‎apps/sim/app/workspace/[workspaceId]/home/components/template-prompts/template-prompts.tsx‎

Lines changed: 149 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
'use client'
22

3+
import { type ComponentType, memo, type SVGProps } from 'react'
34
import Image from 'next/image'
5+
import { AgentIcon, ScheduleIcon, StartIcon } from '@/components/icons'
46
import type { Category, ModuleTag } from './consts'
57
import { CATEGORY_META, TEMPLATES } from './consts'
68

@@ -62,7 +64,12 @@ const KB_BADGE: Record<string, string> = {
6264
Processing: 'bg-violet-500/15 text-violet-700 dark:text-violet-400',
6365
}
6466

65-
const WORKFLOW_COLOR = '#7C3AED'
67+
interface WorkflowBlockDef {
68+
color: string
69+
name: string
70+
icon: ComponentType<SVGProps<SVGSVGElement>>
71+
rows: { title: string; value: string }[]
72+
}
6673

6774
function PreviewTable() {
6875
return (
@@ -165,40 +172,145 @@ function PreviewFile() {
165172
)
166173
}
167174

168-
function PreviewWorkflow() {
175+
const WorkflowMiniBlock = memo(function WorkflowMiniBlock({
176+
color,
177+
name,
178+
icon: Icon,
179+
rows,
180+
}: WorkflowBlockDef) {
181+
const hasRows = rows.length > 0
169182
return (
170-
<div className='relative h-full w-full bg-[var(--surface-2)]'>
171-
<div className='absolute top-[18px] left-[18px] h-[20px] w-[20px] rounded-[4px] border border-[var(--border-2)] bg-[var(--surface-3)]' />
172-
<div className='absolute top-[27px] left-[38px] h-px w-[24px] bg-[var(--border-2)]' />
173-
<div
174-
className='absolute top-[18px] left-[62px] h-[20px] w-[20px] rounded-[4px] border-[2px]'
175-
style={{
176-
backgroundColor: WORKFLOW_COLOR,
177-
borderColor: `${WORKFLOW_COLOR}60`,
178-
backgroundClip: 'padding-box',
179-
}}
180-
/>
181-
<div className='absolute top-[38px] left-[71px] h-[18px] w-px bg-[var(--border-2)]' />
182-
<div className='absolute top-[56px] left-[62px] h-[20px] w-[20px] rounded-[4px] border border-[var(--border-2)] bg-[var(--surface-3)]' />
183-
<div className='absolute top-[65px] left-[82px] h-px w-[20px] bg-[var(--border-2)]' />
183+
<div className='w-[76px] rounded-[4px] border border-[var(--border-1)] bg-[var(--white)] dark:bg-[var(--surface-4)]'>
184184
<div
185-
className='absolute top-[56px] left-[102px] h-[20px] w-[20px] rounded-[4px] border-[2px]'
186-
style={{
187-
backgroundColor: WORKFLOW_COLOR,
188-
borderColor: `${WORKFLOW_COLOR}60`,
189-
backgroundClip: 'padding-box',
190-
opacity: 0.5,
191-
}}
192-
/>
185+
className={`flex items-center gap-[4px] px-[5px] py-[3px] ${hasRows ? 'border-[var(--border-1)] border-b' : ''}`}
186+
>
187+
<div
188+
className='flex h-[11px] w-[11px] shrink-0 items-center justify-center rounded-[3px]'
189+
style={{ backgroundColor: color }}
190+
>
191+
<Icon className='h-[7px] w-[7px] text-white' />
192+
</div>
193+
<span className='truncate font-medium text-[6.5px] text-[var(--text-body)]'>{name}</span>
194+
</div>
195+
{rows.map((row) => (
196+
<div key={row.title} className='flex items-center gap-[3px] px-[5px] py-[2px]'>
197+
<span className='shrink-0 text-[5.5px] text-[var(--text-tertiary)]'>{row.title}</span>
198+
<span className='ml-auto truncate text-[5.5px] text-[var(--text-body)]'>{row.value}</span>
199+
</div>
200+
))}
193201
</div>
194202
)
203+
})
204+
205+
function buildWorkflowBlocks(template: (typeof TEMPLATES)[number]): WorkflowBlockDef[] {
206+
const modules = template.modules
207+
const toolName = template.title.split(' ')[0]
208+
const hasAgent = modules.includes('agent')
209+
const isScheduled = modules.includes('scheduled')
210+
211+
const starter: WorkflowBlockDef = isScheduled
212+
? {
213+
color: '#6366F1',
214+
name: 'Schedule',
215+
icon: ScheduleIcon,
216+
rows: [{ title: 'Cron', value: '0 9 * * 1' }],
217+
}
218+
: {
219+
color: '#2FB3FF',
220+
name: 'Starter',
221+
icon: StartIcon,
222+
rows: [{ title: 'Trigger', value: 'Manual' }],
223+
}
224+
225+
const agent: WorkflowBlockDef = {
226+
color: '#802FFF',
227+
name: 'Agent',
228+
icon: AgentIcon,
229+
rows: [{ title: 'Model', value: 'gpt-4o' }],
230+
}
231+
232+
const tool: WorkflowBlockDef = {
233+
color: '#3B3B3B',
234+
name: toolName,
235+
icon: template.icon,
236+
rows: [{ title: 'Action', value: 'Run' }],
237+
}
238+
239+
if (hasAgent) return [starter, agent, tool]
240+
return [starter, tool]
195241
}
196242

197-
function TemplatePreview({ modules }: { modules: ModuleTag[] }) {
243+
const BLOCK_W = 76
244+
const EDGE_W = 14
245+
246+
function PreviewWorkflow({ template }: { template: (typeof TEMPLATES)[number] }) {
247+
const blocks = buildWorkflowBlocks(template)
248+
const goesUp = template.title.charCodeAt(0) % 2 === 0
249+
250+
const twoBlock = blocks.length === 2
251+
const offsets = twoBlock
252+
? goesUp
253+
? [-10, 10]
254+
: [10, -10]
255+
: goesUp
256+
? [-12, 12, -12]
257+
: [12, -12, 12]
258+
259+
const totalW = blocks.length * BLOCK_W + (blocks.length - 1) * EDGE_W
260+
261+
return (
262+
<div className='flex h-full w-full items-center justify-center bg-[var(--surface-2)]'>
263+
<div className='relative' style={{ width: totalW, height: 70 }}>
264+
<svg
265+
className='pointer-events-none absolute top-0 left-0 z-0'
266+
width={totalW}
267+
height={70}
268+
fill='none'
269+
style={{ overflow: 'visible' }}
270+
>
271+
{blocks.slice(1).map((_, i) => {
272+
const x1 = i * (BLOCK_W + EDGE_W) + BLOCK_W
273+
const y1 = 35 + offsets[i]
274+
const x2 = (i + 1) * (BLOCK_W + EDGE_W)
275+
const y2 = 35 + offsets[i + 1]
276+
const midX = (x1 + x2) / 2
277+
return (
278+
<path
279+
key={i}
280+
d={`M${x1},${y1} C${midX},${y1} ${midX},${y2} ${x2},${y2}`}
281+
className='stroke-[var(--text-icon)]'
282+
strokeWidth={1}
283+
opacity={0.3}
284+
/>
285+
)
286+
})}
287+
</svg>
288+
289+
{blocks.map((block, i) => {
290+
const x = i * (BLOCK_W + EDGE_W)
291+
const yCenter = 35 + offsets[i]
292+
return (
293+
<div key={block.name} className='absolute z-10' style={{ left: x, top: yCenter - 20 }}>
294+
<WorkflowMiniBlock {...block} />
295+
</div>
296+
)
297+
})}
298+
</div>
299+
</div>
300+
)
301+
}
302+
303+
function TemplatePreview({
304+
modules,
305+
template,
306+
}: {
307+
modules: ModuleTag[]
308+
template: (typeof TEMPLATES)[number]
309+
}) {
198310
if (modules.includes('tables')) return <PreviewTable />
199311
if (modules.includes('knowledge-base')) return <PreviewKnowledge />
200312
if (modules.includes('files')) return <PreviewFile />
201-
return <PreviewWorkflow />
313+
return <PreviewWorkflow template={template} />
202314
}
203315

204316
interface TemplatePromptsProps {
@@ -207,17 +319,21 @@ interface TemplatePromptsProps {
207319

208320
export function TemplatePrompts({ onSelect }: TemplatePromptsProps) {
209321
return (
210-
<div className='flex flex-col gap-[32px]'>
211-
<div className='grid grid-cols-3 gap-[16px]'>
322+
<div className='flex flex-col gap-[24px] lg:gap-[32px]'>
323+
<div className='grid grid-cols-1 gap-[12px] md:grid-cols-2 md:gap-[16px] lg:grid-cols-3'>
212324
{FEATURED_TEMPLATES.map((template) => (
213325
<TemplateCard key={template.title} template={template} onSelect={onSelect} />
214326
))}
215327
</div>
216328

217329
{GROUPED_EXTRAS.map((group) => (
218-
<div key={group.category} className='flex flex-col gap-[12px]'>
330+
<div
331+
key={group.category}
332+
className='flex flex-col gap-[12px]'
333+
style={{ contentVisibility: 'auto', containIntrinsicSize: 'auto 200px' }}
334+
>
219335
<h3 className='font-medium text-[13px] text-[var(--text-secondary)]'>{group.label}</h3>
220-
<div className='grid grid-cols-3 gap-[16px]'>
336+
<div className='grid grid-cols-1 gap-[12px] md:grid-cols-2 md:gap-[16px] lg:grid-cols-3'>
221337
{group.templates.map((template) => (
222338
<TemplateCard key={template.title} template={template} onSelect={onSelect} />
223339
))}
@@ -233,7 +349,7 @@ interface TemplateCardProps {
233349
onSelect: (prompt: string) => void
234350
}
235351

236-
function TemplateCard({ template, onSelect }: TemplateCardProps) {
352+
const TemplateCard = memo(function TemplateCard({ template, onSelect }: TemplateCardProps) {
237353
const Icon = template.icon
238354

239355
return (
@@ -254,7 +370,7 @@ function TemplateCard({ template, onSelect }: TemplateCardProps) {
254370
className='object-cover transition-transform duration-200 group-hover:scale-[1.02]'
255371
/>
256372
) : (
257-
<TemplatePreview modules={template.modules} />
373+
<TemplatePreview modules={template.modules} template={template} />
258374
)}
259375
</div>
260376
<div className='flex items-center gap-[6px] border-[var(--border-1)] border-t bg-[var(--white)] px-[12px] py-[8px] transition-colors group-hover:bg-[var(--surface-2)] dark:bg-[var(--surface-4)]'>
@@ -264,4 +380,4 @@ function TemplateCard({ template, onSelect }: TemplateCardProps) {
264380
</div>
265381
</button>
266382
)
267-
}
383+
})

‎apps/sim/app/workspace/[workspaceId]/home/home.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -348,7 +348,7 @@ export function Home({ chatId }: HomeProps = {}) {
348348
</div>
349349
<div
350350
ref={templateRef}
351-
className='-mt-[30vh] mx-auto w-full max-w-[68rem] px-[40px] pb-[32px]'
351+
className='-mt-[30vh] mx-auto w-full max-w-[68rem] px-[16px] pb-[32px] sm:px-[24px] lg:px-[40px]'
352352
>
353353
<TemplatePrompts onSelect={handleSubmit} />
354354
</div>

‎apps/sim/components/icons.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1390,7 +1390,7 @@ export function AmplitudeIcon(props: SVGProps<SVGSVGElement>) {
13901390
return (
13911391
<svg {...props} xmlns='http://www.w3.org/2000/svg' viewBox='0 0 49 49'>
13921392
<path
1393-
fill='#FFFFFF'
1393+
fill='currentColor'
13941394
d='M23.4,15.3c0.6,1.8,1.2,4.1,1.9,6.7c-2.6,0-5.3-0.1-7.8-0.1h-1.3c1.5-5.7,3.2-10.1,4.6-11.1 c0.1-0.1,0.2-0.1,0.4-0.1c0.2,0,0.3,0.1,0.5,0.3C21.9,11.5,22.5,12.7,23.4,15.3z M49,24.5C49,38,38,49,24.5,49S0,38,0,24.5 S11,0,24.5,0S49,11,49,24.5z M42.7,23.9c0-0.6-0.4-1.2-1-1.3l0,0l0,0l0,0c-0.1,0-0.1,0-0.2,0h-0.2c-4.1-0.3-8.4-0.4-12.4-0.5l0,0 C27,14.8,24.5,7.4,21.3,7.4c-3,0-5.8,4.9-8.2,14.5c-1.7,0-3.2,0-4.6-0.1c-0.1,0-0.2,0-0.2,0c-0.3,0-0.5,0-0.5,0 c-0.8,0.1-1.4,0.9-1.4,1.7c0,0.8,0.6,1.6,1.5,1.7l0,0h4.6c-0.4,1.9-0.8,3.8-1.1,5.6l-0.1,0.8l0,0c0,0.6,0.5,1.1,1.1,1.1 c0.4,0,0.8-0.2,1-0.5l0,0l2.2-7.1h10.7c0.8,3.1,1.7,6.3,2.8,9.3c0.6,1.6,2,5.4,4.4,5.4l0,0c3.6,0,5-5.8,5.9-9.6 c0.2-0.8,0.4-1.5,0.5-2.1l0.1-0.2l0,0c0-0.1,0-0.2,0-0.3c-0.1-0.2-0.2-0.3-0.4-0.4c-0.3-0.1-0.5,0.1-0.6,0.4l0,0l-0.1,0.2 c-0.3,0.8-0.6,1.6-0.8,2.3v0.1c-1.6,4.4-2.3,6.4-3.7,6.4l0,0l0,0l0,0c-1.8,0-3.5-7.3-4.1-10.1c-0.1-0.5-0.2-0.9-0.3-1.3h11.7 c0.2,0,0.4-0.1,0.6-0.1l0,0c0,0,0,0,0.1,0c0,0,0,0,0.1,0l0,0c0,0,0.1,0,0.1-0.1l0,0C42.5,24.6,42.7,24.3,42.7,23.9z'
13951395
/>
13961396
</svg>

0 commit comments

Comments
 (0)