Update to version 0.1.50 (StructuredLabs#606)

Center align

Clean up markdown

fix partial scroll issue

Simplify tableviewer

Chat widget UI

Improve chat widget ui

Remove sidebar portal

Improve sidebar styling

Sidebar styling

Table viewer

Co-authored-by: Shivam Singhal <shivamsi@gmail.com>

Author: amrutha97

examples/iris/hello.py

@@ -9,11 +9,14 @@
     # fastplotlib,
     get_df,
     plotly,
+    sidebar,
     table,
     text,
 )
 
 
+sidebar()
+
 # from preswald.engine.service import PreswaldService
 
 
@@ -162,7 +165,7 @@
 text(
     "## Sample of the Iris Dataset \n Below is a preview of the first 10 rows of the dataset, showing key measurements for each iris species."
 )
-table(df, limit=10)
+table(df)
 
 # Add an interactive chat interface
 text(

frontend/src/App.css

@@ -1,8 +1,7 @@
 #root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
+  width: 100%;
+  margin: 0;
+  padding: 0;
 }
 
 .logo {

frontend/src/components.css

@@ -8,27 +8,27 @@
 }
 
 .main-content-collapsed-sidebar {
-  @apply lg:pl-20 transition-all duration-300;
+  @apply lg:pl-20 transition-all duration-300 ease-in-out;
 }
 
 .main-content-open-sidebar {
-  @apply lg:pl-80 transition-all duration-300;
+  @apply lg:pl-64 transition-all duration-300 ease-in-out;
 }
 
 .topbar {
   @apply fixed top-0 z-40 flex h-16 shrink-0 items-center gap-x-4 border-b bg-background -mx-8 sm:-mx-10 lg:-mx-12 shadow-sm w-full;
 }
 
 .mobile-menu-button {
-  @apply lg:hidden;
+  @apply fixed left-4 top-4 z-50 lg:hidden h-9 w-9 p-0 flex items-center justify-center;
 }
 
 .desktop-collapse-button {
-  @apply hidden lg:flex;
+  @apply hidden lg:flex absolute -right-4 top-3 h-6 w-6 items-center justify-center rounded-full z-50 translate-x-1/2;
 }
 
 .icon-button {
-  @apply h-6 w-6 transition-transform duration-200;
+  @apply h-4 w-4 transition-transform duration-200;
 }
 
 .separator {
@@ -52,51 +52,55 @@
 }
 
 .sidebar-container {
-  @apply flex grow flex-col h-full;
+  @apply flex grow flex-col gap-4 h-full py-2;
 }
 
 .sidebar-content {
   @apply flex flex-col h-full justify-between;
 }
 
 .sidebar-nav {
-  @apply flex flex-col gap-y-5 w-full;
+  @apply flex flex-col gap-1 w-full;
 }
 
 .sidebar-header {
-  @apply flex h-16 shrink-0 items-center;
+  @apply flex h-16 items-center px-6 mb-2;
+}
+
+.sidebar-logo-container {
+  @apply w-6 h-6 flex items-center justify-center shrink-0;
 }
 
 .sidebar-logo {
-  @apply h-8 w-8;
+  @apply h-6 w-6;
 }
 
 .sidebar-title {
-  @apply ml-4 text-lg font-semibold transition-opacity duration-200;
+  @apply ml-2 text-lg font-medium text-foreground;
 }
 
 .sidebar-nav-list {
-  @apply flex flex-1 flex-col;
+  @apply flex flex-1 flex-col px-4;
 }
 
 .sidebar-nav-items {
-  @apply flex flex-1 flex-col gap-y-7;
+  @apply flex flex-1 flex-col gap-1;
 }
 
 .sidebar-nav-link {
-  @apply flex items-center gap-x-3 rounded-md px-2 py-2 text-sm font-semibold leading-6 transition-all duration-200 m-2;
+  @apply flex items-center gap-x-3 rounded-md px-3 py-2 text-sm text-muted-foreground font-medium transition-colors hover:bg-accent hover:text-accent-foreground;
 }
 
 .sidebar-nav-link-active {
-  @apply bg-accent hover:rounded-md;
+  @apply bg-accent/50 text-foreground;
 }
 
 .sidebar-nav-link-hover {
-  @apply hover:bg-accent;
+  @apply hover:bg-accent hover:text-accent-foreground;
 }
 
 .sidebar-icon {
-  @apply h-6 w-6 shrink-0 transition-transform duration-200;
+  @apply h-4 w-4 shrink-0 opacity-70;
 }
 
 .sidebar-footer {
@@ -109,48 +113,48 @@
 
 /* Mobile Sidebar */
 .sidebar-mobile {
-  @apply fixed inset-y-0 left-0 flex w-[280px] flex-col border-r bg-background p-0;
+  @apply fixed inset-y-0 left-0 flex w-[280px] flex-col bg-background p-0 shadow-lg;
 }
 
 .sidebar-mobile-header {
-  @apply p-4 border-b;
+  @apply flex h-16 items-center px-6 border-b border-border;
 }
 
 .sidebar-mobile-title {
-  @apply flex items-center gap-2;
+  @apply flex items-center gap-3;
 }
 
 .sidebar-mobile-close-btn {
   @apply top-4 right-4 h-8 w-8;
 }
 
 .sidebar-mobile-content {
-  @apply flex-1 overflow-hidden px-4 py-2;
+  @apply flex-1 overflow-y-auto px-4 py-2;
 }
 
-/* Desktop Sidebar */
-.sidebar-desktop {
-  @apply hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:flex-col border-r bg-background transition-all duration-300 ease-in-out transform-gpu;
+.sidebar-mobile-logo-container {
+  @apply w-6 h-6 flex items-center justify-center shrink-0;
 }
 
-.sidebar-desktop-collapsed {
-  @apply lg:w-20 pt-6 items-center gap-y-4;
+.sidebar-mobile-name {
+  @apply text-lg font-medium text-foreground;
 }
 
-.sidebar-desktop-collapsed .sidebar-header {
-  @apply justify-center items-center;
+/* Desktop Sidebar */
+.sidebar-desktop {
+  @apply hidden lg:flex fixed left-0 top-0 h-full flex-col bg-muted/50 transition-all duration-300 ease-in-out z-30 border-r border-border;
 }
 
-.sidebar-desktop-expanded {
-  @apply lg:w-80;
+.sidebar-desktop-collapsed {
+  width: 80px;
 }
 
-.sidebar-desktop-expanded .desktop-collapse-button {
-  @apply fixed top-6 right-2;
+.sidebar-desktop-expanded {
+  width: 256px;
 }
 
 .sidebar-desktop-content {
-  @apply flex-1 overflow-hidden px-4 py-2;
+  @apply flex-1 overflow-hidden px-2 py-2;
 }
 
 .loading-container {
@@ -560,106 +564,6 @@
   @apply text-muted-foreground;
 }
 
-.markdown-container {
-  @apply w-full;
-}
-
-.markdown-card-variant-default {
-  @apply bg-card;
-}
-
-.markdown-card-variant-outline {
-  @apply border rounded-lg;
-}
-
-.markdown-card-variant-ghost {
-  @apply bg-transparent border-none shadow-none;
-}
-
-.markdown-card-content {
-  @apply prose prose-sm md:prose-base lg:prose-lg dark:prose-invert max-w-none;
-}
-
-.markdown-headings {
-  @apply prose-headings:scroll-m-20;
-}
-
-.markdown-paragraph {
-  @apply prose-p:leading-7;
-}
-
-.markdown-list {
-  @apply prose-li:marker:text-muted-foreground;
-}
-
-.markdown-pre {
-  @apply prose-pre:p-0 prose-pre:bg-transparent prose-pre:shadow-lg;
-}
-
-.markdown-code {
-  @apply prose-code:text-zinc-900 dark:prose-code:text-zinc-100;
-}
-
-.markdown-padding {
-  @apply p-0;
-}
-
-.markdown-heading-1 {
-  @apply scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl;
-}
-
-.markdown-heading-2 {
-  @apply scroll-m-20 pb-2 text-3xl font-semibold tracking-tight first:mt-0;
-}
-
-.markdown-heading-3 {
-  @apply scroll-m-20 text-2xl font-semibold tracking-tight;
-}
-
-.markdown-link {
-  @apply font-medium text-primary underline underline-offset-4;
-}
-
-.markdown-pre-wrapper {
-  @apply mb-2 mt-2 overflow-x-auto rounded-lg bg-zinc-950 dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 p-4 shadow-sm;
-}
-
-.markdown-inline-code {
-  @apply relative rounded px-[0.3rem] py-[0.2rem] font-mono text-sm bg-zinc-100 dark:bg-zinc-800 text-zinc-900 dark:text-zinc-100 whitespace-normal inline-block;
-}
-
-.markdown-code-lang {
-  @apply absolute right-2 top-2 z-10 rounded-md bg-zinc-700 px-2 py-1 text-xs font-medium text-zinc-200;
-}
-
-.markdown-blockquote {
-  @apply mt-2 border-l-2 pl-6 italic;
-}
-
-.markdown-ul {
-  @apply my-2 ml-6 list-disc [&>li]:mt-2;
-}
-
-.markdown-ol {
-  @apply my-2 ml-6 list-decimal [&>li]:mt-2;
-}
-
-.markdown-table-wrapper {
-  @apply my-4 w-full overflow-y-auto;
-}
-
-.markdown-table {
-  @apply w-full;
-}
-
-.markdown-th {
-  @apply border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right;
-}
-
-.markdown-td {
-  @apply border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right;
-}
-
 .image-widget-container {
   @apply overflow-hidden;
 }
@@ -832,3 +736,8 @@
 .dag-visualizer-tooltip-content {
   @apply text-xs;
 }
+
+/* Platform/Section Headers in Sidebar */
+.sidebar-section-header {
+  @apply px-2 py-4 text-xs font-medium text-muted-foreground/70 uppercase tracking-wider;
+}

frontend/src/components/DynamicComponents.jsx

@@ -65,16 +65,7 @@ class ErrorBoundary extends React.Component {
 
 // Memoized component wrapper
 const MemoizedComponent = memo(
-  ({
-    component,
-    index,
-    handleUpdate,
-    extractKeyProps,
-    sidebarOpen,
-    setSidebarOpen,
-    isCollapsed,
-    setIsCollapsed,
-  }) => {
+  ({ component, index, handleUpdate, extractKeyProps }) => {
     const [componentId, componentKey, props] = extractKeyProps(component, index);
 
     switch (component.type) {
@@ -248,12 +239,6 @@ const MemoizedComponent = memo(
             key={componentKey}
             {...props}
             rowData={component.data || []}
-            title={component.title || 'Table Viewer'}
-            variant={component.variant || 'default'}
-            showTitle={component.showTitle ?? true}
-            striped={component.striped ?? true}
-            dense={component.dense ?? false}
-            hoverable={component.hoverable ?? true}
             className={component.className}
           />
         );

frontend/src/components/Layout.jsx

@@ -1,19 +1,7 @@
 'use client';
 
-import {
-  ChartBarIcon,
-  ClockIcon,
-  DocumentTextIcon,
-  GlobeAltIcon,
-  HomeIcon,
-  MagnifyingGlassIcon,
-  ServerIcon,
-  Squares2X2Icon,
-} from '@heroicons/react/24/solid';
-
 import React, { useState } from 'react';
 import { useEffect } from 'react';
-import { Outlet } from 'react-router-dom';
 
 export default function Layout({ branding, children }) {
   const [faviconLoaded, setFaviconLoaded] = useState(false);
@@ -72,11 +60,9 @@ export default function Layout({ branding, children }) {
 
   return (
     <div className="min-h-screen bg-background">
-      <div id="sidebar-portal" />
-      {/* Main Content */}
-      <div className="flex flex-col min-h-screen main-content-layout">
-        <main className="flex-1 py-10">
-          <div className="px-4 sm:px-6 lg:px-8">{children}</div>
+      <div className="flex min-h-screen relative">
+        <main className="flex-1 main-content-layout relative z-0">
+          <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-10">{children}</div>
         </main>
       </div>
     </div>