ext/hyperframes
2
0
Fork 0
mirror of https://github.com/heygen-com/hyperframes.git synced 2026-09-03 23:03:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(studio): improve Ask agent UX, add tooltips to tabs and buttons

Browse Source 
- Ask agent button turns green with checkmark on copy
- Add button shows tooltip "Add to composition at current time"
- Ask agent shows tooltip "Copy a prompt to paste into your AI agent"
- Tab tooltips: Code, Comps, Assets, Catalog each explain their purpose
- Search placeholder updated to "Search by name, category, or tag…"
This commit is contained in:
Miguel Ángel
2026-05-21 19:57:22 -04:00
parent 76d2c6af5d
commit 0b0021a310
2 changed files with 45 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/studio/src/components/sidebar/BlocksTab.tsx
+41 -15
View File
@@ -63,7 +63,7 @@ export const BlocksTab = memo(function BlocksTab({ onAddBlock, onPreviewBlock }:
type="text"
value={search}
onChange={(e) => setSearch(e.target.value)}
placeholder="Search blocks…"
placeholder="Search by name, category, or tag…"
className="w-full bg-neutral-900 border border-neutral-800 rounded-md pl-7 pr-2 py-1.5 text-[11px] text-neutral-200 placeholder:text-neutral-600 focus:outline-none focus:border-neutral-700 transition-colors"
/>
</div>
@@ -400,6 +400,7 @@ function BlockCard({
<button
type="button"
onClick={handleAdd}
title="Add to composition at current time"
className="flex items-center gap-1 px-3 py-1.5 rounded-md bg-white text-black text-[10px] font-semibold hover:bg-neutral-200 transition-colors"
>
<svg
@@ -412,26 +413,51 @@ function BlockCard({
>
<path d="M12 5v14M5 12h14" />
</svg>
{adding ? "Added" : "Add"}
{adding ? "Added!" : "Add"}
</button>
)}
<button
type="button"
onClick={handleCopyPrompt}
className={`flex items-center gap-1 px-3 ${onAdd ? "py-1" : "py-1.5"} rounded-md ${onAdd ? "bg-white/15 text-white/90 text-[9px]" : "bg-white text-black text-[10px] font-semibold"} hover:bg-white/25 transition-colors`}
title="Copy a prompt to paste into your AI agent"
className={`flex items-center gap-1.5 px-3 ${onAdd ? "py-1" : "py-1.5"} rounded-md transition-colors ${
copied
? "bg-emerald-500 text-white"
: onAdd
? "bg-white/15 text-white/90 hover:bg-white/25"
: "bg-white text-black hover:bg-neutral-200"
} ${onAdd ? "text-[9px]" : "text-[10px] font-semibold"}`}
>
<svg
width={onAdd ? 9 : 12}
height={onAdd ? 9 : 12}
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
>
<rect x="9" y="9" width="13" height="13" rx="2" />
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
</svg>
{copied ? "Copied!" : "Ask agent"}
{copied ? (
<>
<svg
width={onAdd ? 9 : 11}
height={onAdd ? 9 : 11}
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2.5"
>
<path d="M20 6 9 17l-5-5" />
</svg>
Copied!
</>
) : (
<>
<svg
width={onAdd ? 9 : 11}
height={onAdd ? 9 : 11}
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
>
<rect x="9" y="9" width="13" height="13" rx="2" />
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
</svg>
Ask agent
</>
)}
</button>
</div>
packages/studio/src/components/sidebar/LeftSidebar.tsx
+4
View File
@@ -127,6 +127,7 @@ export const LeftSidebar = memo(
<button
type="button"
onClick={() => selectTab("code")}
title="Source code editor"
className={`rounded-[14px] px-1.5 py-2 text-[10px] font-semibold truncate transition-all ${
tab === "code"
? "bg-neutral-800 text-white"
@@ -138,6 +139,7 @@ export const LeftSidebar = memo(
<button
type="button"
onClick={() => selectTab("compositions")}
title="Composition layers and sub-compositions"
className={`rounded-[14px] px-1.5 py-2 text-[10px] font-semibold truncate transition-all ${
tab === "compositions"
? "bg-neutral-800 text-white"
@@ -149,6 +151,7 @@ export const LeftSidebar = memo(
<button
type="button"
onClick={() => selectTab("assets")}
title="Media assets — videos, images, audio, fonts"
className={`rounded-[14px] px-1.5 py-2 text-[10px] font-semibold truncate transition-all ${
tab === "assets"
? "bg-neutral-800 text-white"
@@ -161,6 +164,7 @@ export const LeftSidebar = memo(
<button
type="button"
onClick={() => selectTab("blocks")}
title="Browse blocks, components, and templates from the registry"
className={`rounded-[14px] px-1.5 py-2 text-[10px] font-semibold truncate transition-all ${
tab === "blocks"
? "bg-neutral-800 text-white"