improvement(docs): added images and videos to quick references by waleedlatif1 · Pull Request #3004 · simstudioai/sim

waleedlatif1 · 2026-01-26T07:31:25Z

Summary

added images and videos to quick references

Type of Change

Documentation

Testing

N/A

Checklist

Code follows project style guidelines
Self-reviewed my changes
Tests added/updated and passing
No new warnings introduced
I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

vercel · 2026-01-26T07:31:26Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
docs	Building	Preview, Comment	Jan 26, 2026 7:31am

greptile-apps · 2026-01-26T07:34:59Z

Greptile Overview

Greptile Summary

Enhanced the quick reference documentation with visual media (images and videos). The PR introduces a new ActionImage and ActionVideo component to display media in documentation tables, and updates the quick reference guide from simple markdown tables to rich HTML tables with visual previews. Videos were moved to Vercel Blob storage to reduce repository size.

Key Changes

Created action-media.tsx component with ActionImage and ActionVideo exports for rendering media in tables
Transformed all quick reference tables to include a "Preview" column with visual demonstrations
Added 29 PNG screenshot files for static UI elements
Moved 15 MP4 video files to blob storage (removed from repository)
Significantly expanded documentation coverage with detailed action references for workspaces, workflows, blocks, connections, panels, testing, deployment, and variables

Notes

The new ActionImage component uses a plain <img> tag instead of Next.js Image component (unlike the existing Image component in the codebase)
Videos are configured with autoPlay, loop, muted, and playsInline for optimal inline preview experience
The getAssetUrl utility properly handles both local static files and blob storage URLs via NEXT_PUBLIC_BLOB_BASE_URL environment variable

Confidence Score: 4/5

Safe to merge with minor improvements recommended
This is a documentation-only PR that adds helpful visual guides to the quick reference page. The changes are well-structured and comprehensive. The new component is simple and functional, though it could follow existing patterns more closely for consistency. No runtime errors or critical issues detected, only style improvements suggested.
apps/docs/components/ui/action-media.tsx could benefit from following the existing Image/Video component patterns more closely

Important Files Changed

Filename	Overview
apps/docs/components/ui/action-media.tsx	New component for rendering images and videos in quick reference tables, uses getAssetUrl to support blob storage. Missing accessibility attributes and error handling that exist in similar components.
apps/docs/content/docs/en/quick-reference/index.mdx	Enhanced quick reference documentation with visual previews, converted from markdown tables to HTML tables with image/video previews. Well-structured and comprehensive.

Sequence Diagram

sequenceDiagram
    participant User
    participant Browser
    participant MDX as Quick Reference MDX
    participant ActionMedia as ActionImage/ActionVideo
    participant Utils as getAssetUrl()
    participant CDN as Vercel Blob/Static

    User->>Browser: Navigate to /quick-reference
    Browser->>MDX: Render documentation page
    MDX->>ActionMedia: Render ActionImage/ActionVideo components
    ActionMedia->>Utils: getAssetUrl(src)
    
    alt CDN configured (NEXT_PUBLIC_BLOB_BASE_URL set)
        Utils->>ActionMedia: Return CDN URL
        ActionMedia->>CDN: Fetch video/image from Blob storage
    else No CDN (local development)
        Utils->>ActionMedia: Return local path
        ActionMedia->>CDN: Fetch from /public/static
    end
    
    CDN->>ActionMedia: Return media file
    ActionMedia->>Browser: Render <img> or <video> element
    Browser->>User: Display visual quick reference guide

greptile-apps

_{4 files reviewed, 4 comments}

_{Edit Code Review Agent Settings | Greptile}

greptile-apps · 2026-01-26T07:35:03Z

apps/docs/components/ui/action-media.tsx

+    <img
+      src={resolvedSrc}
+      alt={alt}
+      className='inline-block w-full max-w-[200px] rounded border border-neutral-200 dark:border-neutral-700'
+    />
+  )


Missing width and height attributes which are important for layout stability and avoiding CLS (Cumulative Layout Shift). The existing Image component (apps/docs/components/ui/image.tsx:13-53) uses Next.js Image component which handles dimensions properly.

Prompt To Fix With AI

This is a comment left during a code review. Path: apps/docs/components/ui/action-media.tsx Line: 19:24 Comment: Missing `width` and `height` attributes which are important for layout stability and avoiding CLS (Cumulative Layout Shift). The existing `Image` component (apps/docs/components/ui/image.tsx:13-53) uses Next.js Image component which handles dimensions properly. How can I resolve this? If you propose a fix, please make it concise.

greptile-apps · 2026-01-26T07:35:04Z

apps/docs/components/ui/action-media.tsx

+    <video
+      src={resolvedSrc}
+      autoPlay
+      loop
+      muted
+      playsInline
+      className='inline-block w-full max-w-[200px] rounded border border-neutral-200 dark:border-neutral-700'
+    />


Missing aria-label attribute for accessibility. The existing Video component pattern (apps/docs/components/ui/video.tsx:36-44) doesn't include this either, but it's a best practice for videos to have descriptive ARIA labels.

_{Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!}

Prompt To Fix With AI

This is a comment left during a code review. Path: apps/docs/components/ui/action-media.tsx Line: 31:38 Comment: Missing `aria-label` attribute for accessibility. The existing `Video` component pattern (apps/docs/components/ui/video.tsx:36-44) doesn't include this either, but it's a best practice for videos to have descriptive ARIA labels. <sub>Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!</sub> How can I resolve this? If you propose a fix, please make it concise.

greptile-apps · 2026-01-26T07:35:05Z

apps/docs/components/ui/action-media.tsx

+export function ActionImage({ src, alt }: ActionImageProps) {
+  const resolvedSrc = getAssetUrl(src.startsWith('/') ? src.slice(1) : src)
+
+  return (
+    <img
+      src={resolvedSrc}
+      alt={alt}
+      className='inline-block w-full max-w-[200px] rounded border border-neutral-200 dark:border-neutral-700'
+    />
+  )
+}


Consider reusing the existing Image component (apps/docs/components/ui/image.tsx:13-53) instead of creating a separate implementation. The existing component uses Next.js Image for better performance and includes lightbox functionality.

_{Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!}

Prompt To Fix With AI

This is a comment left during a code review. Path: apps/docs/components/ui/action-media.tsx Line: 15:25 Comment: Consider reusing the existing `Image` component (apps/docs/components/ui/image.tsx:13-53) instead of creating a separate implementation. The existing component uses Next.js Image for better performance and includes lightbox functionality. <sub>Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!</sub> How can I resolve this? If you propose a fix, please make it concise.

greptile-apps · 2026-01-26T07:35:06Z

apps/docs/components/ui/action-media.tsx

+}
+
+export function ActionImage({ src, alt }: ActionImageProps) {
+  const resolvedSrc = getAssetUrl(src.startsWith('/') ? src.slice(1) : src)


The getAssetUrl function already handles paths without leading slashes (apps/docs/lib/utils.ts:16-22), so the src.startsWith('/') check and slice(1) logic may be unnecessary duplication.

Prompt To Fix With AI

This is a comment left during a code review. Path: apps/docs/components/ui/action-media.tsx Line: 16:16 Comment: The `getAssetUrl` function already handles paths without leading slashes (apps/docs/lib/utils.ts:16-22), so the `src.startsWith('/')` check and `slice(1)` logic may be unnecessary duplication. How can I resolve this? If you propose a fix, please make it concise.

cursor

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{Bugbot Autofix is OFF. To automatically fix reported issues with Cloud Agents, enable Autofix in the Cursor dashboard.}

cursor · 2026-01-26T07:35:52Z

apps/docs/components/ui/action-media.tsx

+      playsInline
+      className='inline-block w-full max-w-[200px] rounded border border-neutral-200 dark:border-neutral-700'
+    />
+  )


Unused alt prop in ActionVideo component

Low Severity

The ActionVideo component accepts an alt prop but never uses it. The <video> HTML element doesn't support the alt attribute like <img> does. All callers in the documentation pass alt values expecting them to provide accessibility information, but the values are silently discarded. For video accessibility, aria-label={alt} could be added to the video element.

waleedlatif1 added 2 commits January 25, 2026 13:50

improvement(docs): added images and videos to quick references

de2e1b8

moved mp4s to blob, completed quick reference guide

35150fd

waleedlatif1 merged commit 80f0047 into staging Jan 26, 2026
6 of 7 checks passed

waleedlatif1 deleted the improvement/doc branch January 26, 2026 07:31

vercel bot deployed to Preview January 26, 2026 07:32 View deployment

greptile-apps bot reviewed Jan 26, 2026

View reviewed changes

cursor bot reviewed Jan 26, 2026

View reviewed changes

Sebmono mentioned this pull request Jan 30, 2026

[PR] improvement(docs): added images and videos to quick references Sandgarden-Demo/sim#20

Closed

6 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

improvement(docs): added images and videos to quick references#3004

improvement(docs): added images and videos to quick references#3004
waleedlatif1 merged 2 commits intostagingfrom
improvement/doc

waleedlatif1 commented Jan 26, 2026

Uh oh!

vercel bot commented Jan 26, 2026 •

edited

Loading

Uh oh!

Uh oh!

greptile-apps bot commented Jan 26, 2026

Uh oh!

greptile-apps bot left a comment

Uh oh!

greptile-apps bot Jan 26, 2026

Uh oh!

greptile-apps bot Jan 26, 2026

Uh oh!

greptile-apps bot Jan 26, 2026

Uh oh!

greptile-apps bot Jan 26, 2026

Uh oh!

cursor bot left a comment

Uh oh!

cursor bot Jan 26, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

waleedlatif1 commented Jan 26, 2026

Summary

Type of Change

Testing

Checklist

Uh oh!

vercel bot commented Jan 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

greptile-apps bot commented Jan 26, 2026

Greptile Overview

Greptile Summary

Key Changes

Notes

Confidence Score: 4/5

Important Files Changed

Sequence Diagram

Uh oh!

greptile-apps bot left a comment

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Jan 26, 2026

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Jan 26, 2026

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Jan 26, 2026

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Jan 26, 2026

Choose a reason for hiding this comment

Uh oh!

cursor bot left a comment

Choose a reason for hiding this comment

Uh oh!

cursor bot Jan 26, 2026

Choose a reason for hiding this comment

Unused alt prop in ActionVideo component

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

vercel bot commented Jan 26, 2026 •

edited

Loading

Unused `alt` prop in `ActionVideo` component