From b9da4062d0228f34d239aaacd3149ae611601292 Mon Sep 17 00:00:00 2001 From: pr3khar Date: Fri, 10 Jul 2026 12:36:29 +0530 Subject: [PATCH 1/2] Refine AgentInterface layout and artifact feedback Polish navigation and conversation spacing, add category-aware empty states and a reusable dot-matrix loader, and restore branded accent defaults. Co-authored-by: Cursor --- .../AgentInterface/ArtifactBrowserPage.tsx | 12 ++- .../AgentInterface/ArtifactViewPage.tsx | 7 +- .../AgentInterface/ConversationStarter.tsx | 3 + .../components/AgentInterface/ThreadList.tsx | 72 +------------- .../AgentInterface/agentInterface.scss | 7 +- .../AgentInterface/artifactBrowser.scss | 20 +++- .../AgentInterface/components/composer.scss | 2 +- .../components/desktopWelcomeComposer.scss | 6 +- .../AgentInterface/conversationStarter.scss | 10 +- .../components/AgentInterface/sidebar.scss | 6 +- .../src/components/AgentInterface/thread.scss | 1 + .../components/AgentInterface/threadlist.scss | 8 +- .../AgentInterface/welcomeScreen.scss | 6 +- .../react-ui/src/components/Card/card.scss | 4 - .../DotMatrixLoader/DotMatrixLoader.tsx | 98 +++++++++++++++++++ .../DotMatrixLoader/dependencies.ts | 2 + .../DotMatrixLoader/dotMatrixLoader.scss | 20 ++++ .../src/components/DotMatrixLoader/index.ts | 1 + .../OpenUIChat/assistantMessage.scss | 23 +---- .../components/ThemeProvider/defaultTheme.ts | 11 ++- packages/react-ui/src/components/index.scss | 1 + packages/react-ui/src/index.ts | 1 + packages/react-ui/src/openui-defaults.scss | 32 +++--- 23 files changed, 216 insertions(+), 137 deletions(-) create mode 100644 packages/react-ui/src/components/DotMatrixLoader/DotMatrixLoader.tsx create mode 100644 packages/react-ui/src/components/DotMatrixLoader/dependencies.ts create mode 100644 packages/react-ui/src/components/DotMatrixLoader/dotMatrixLoader.scss create mode 100644 packages/react-ui/src/components/DotMatrixLoader/index.ts diff --git a/packages/react-ui/src/components/AgentInterface/ArtifactBrowserPage.tsx b/packages/react-ui/src/components/AgentInterface/ArtifactBrowserPage.tsx index 521b64862..8af9a3fed 100644 --- a/packages/react-ui/src/components/AgentInterface/ArtifactBrowserPage.tsx +++ b/packages/react-ui/src/components/AgentInterface/ArtifactBrowserPage.tsx @@ -8,6 +8,7 @@ import { import { Boxes, Search, X } from "lucide-react"; import { useEffect, useRef, useState, type ReactNode } from "react"; import { Button } from "../Button"; +import { DotMatrixLoader } from "../DotMatrixLoader"; import { IconButton } from "../IconButton"; import { artifactListPath, artifactViewPath } from "./_shared/artifactPaths"; import { useAgentInterfaceLabels } from "./_shared/labelsContext"; @@ -102,6 +103,7 @@ export const ArtifactBrowserPage = ({ categoryName }: { categoryName?: string }) // is decided synchronously with no loading race. const notFound = categoryName !== undefined && category === undefined; const typeFilter = category?.filter.type; + const categoryIllustration = useArtifactIcon(typeFilter?.[0] ?? ""); const [search, setSearch] = useState(""); const [debouncedSearch, setDebouncedSearch] = useState(""); @@ -120,7 +122,7 @@ export const ArtifactBrowserPage = ({ categoryName }: { categoryName?: string }) // Noun derived from the category name (not a hardcoded "Apps" match). const emptyItemLabel = categoryName ? categoryName.toLowerCase() : "artifacts"; const emptyMessage = debouncedSearch - ? `No ${emptyItemLabel} match your search` + ? `No results found for "${debouncedSearch}"` : `No ${emptyItemLabel} yet`; // Initial page + reload on search/category change. @@ -235,7 +237,7 @@ export const ArtifactBrowserPage = ({ categoryName }: { categoryName?: string }) {!error && artifacts.length === 0 && !isLoading && (
- + {debouncedSearch ? categoryIllustration : } {emptyMessage}
@@ -251,7 +253,11 @@ export const ArtifactBrowserPage = ({ categoryName }: { categoryName?: string }) /> ); })} - {isLoading &&
Loading…
} + {isLoading && ( +
+ +
+ )} {!isLoading && nextCursor !== undefined && (
); } else if (!artifact) { - body =
Loading…
; + body = ( +
+ +
+ ); } else if (!renderer) { body = (
diff --git a/packages/react-ui/src/components/AgentInterface/ConversationStarter.tsx b/packages/react-ui/src/components/AgentInterface/ConversationStarter.tsx index 12e03a272..3b2360a4b 100644 --- a/packages/react-ui/src/components/AgentInterface/ConversationStarter.tsx +++ b/packages/react-ui/src/components/AgentInterface/ConversationStarter.tsx @@ -156,6 +156,9 @@ export const ConversationStarter = ({ > {starters.map((item, index) => ( + {index > 0 && ( +