ai-design-system 0.1.51 → 0.1.52

package/components/blocks/InboxPanel/InboxPanel.tsx

@@ -40,7 +40,7 @@ export const InboxPanel = React.memo<InboxPanelProps>(
           </div>
         ) : null}
 
-        <div className="px-4 pb-2">
+        <div className="px-4 pt-4 pb-2">
           <Input
             aria-label="Search inbox items"
             className="h-8"

package/components/blocks/SectionLayout/SectionLayout.tsx

@@ -21,6 +21,7 @@ export const SectionLayout = React.memo<SectionLayoutProps>(
     resizable = true,
     dragHandleColor = "border",
     className,
+    padded = true,
     ...props 
   }) => {
     // Transform sections to include headers
@@ -47,6 +48,7 @@ export const SectionLayout = React.memo<SectionLayoutProps>(
         onSectionResize={onSectionResize}
         dragHandleColor={dragHandleColor}
         className={className}
+        padded={padded}
         {...props}
       />
     )

package/components/blocks/SectionLayout/interfaces.ts

@@ -20,4 +20,5 @@ export interface SectionLayoutProps extends React.ComponentPropsWithoutRef<"div"
   onSectionResize?: (sectionId: string, newSize: number) => void;
   resizable?: boolean;
   dragHandleColor?: "primary" | "secondary" | "accent" | "border" | "muted";
+  padded?: boolean;
 }

package/components/composites/AdjustableLayout/AdjustableLayout.tsx

@@ -18,6 +18,7 @@ export interface AdjustableLayoutProps extends React.ComponentPropsWithoutRef<"d
   storageKey?: string // localStorage key for persistence
   onSectionResize?: (sectionId: string, newSize: number) => void
   dragHandleColor?: "primary" | "secondary" | "accent" | "border" | "muted"
+  padded?: boolean
 }
 
 /**
@@ -28,19 +29,20 @@ export interface AdjustableLayoutProps extends React.ComponentPropsWithoutRef<"d
  * Supports localStorage persistence and responsive behavior.
  */
 export const AdjustableLayout = React.memo<AdjustableLayoutProps>(
-  ({ 
-    sections, 
-    orientation = "horizontal", 
+  ({
+    sections,
+    orientation = "horizontal",
     storageKey,
     onSectionResize,
     dragHandleColor = "border",
     className,
-    ...props 
+    padded = false,
+    ...props
   }) => {
     // Color mapping for drag handles
     const colorMap = {
       primary: "bg-primary hover:bg-primary/90",
-      secondary: "bg-secondary hover:bg-secondary/80", 
+      secondary: "bg-secondary hover:bg-secondary/80",
       accent: "bg-accent hover:bg-accent/80",
       border: "bg-border hover:bg-border/80",
       muted: "bg-muted hover:bg-muted/80"
@@ -49,7 +51,7 @@ export const AdjustableLayout = React.memo<AdjustableLayoutProps>(
     const hoverColorMap = {
       primary: "group-hover:bg-primary/30",
       secondary: "group-hover:bg-secondary/30",
-      accent: "group-hover:bg-accent/30", 
+      accent: "group-hover:bg-accent/30",
       border: "group-hover:bg-border/30",
       muted: "group-hover:bg-muted/30"
     }
@@ -77,7 +79,7 @@ export const AdjustableLayout = React.memo<AdjustableLayoutProps>(
       } catch {
         // ignore malformed storage
       }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+      // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [storageKey])
 
     const [draggingIndex, setDraggingIndex] = React.useState<number | null>(null)
@@ -119,33 +121,33 @@ export const AdjustableLayout = React.memo<AdjustableLayoutProps>(
 
       const currentX = orientation === "horizontal" ? e.clientX : e.clientY
       const deltaX = currentX - startX
-      
+
       const deltaPercent = (deltaX / containerSize) * 100
-      
+
       const p1 = sections[draggingIndex]
       const p2 = sections[draggingIndex + 1]
-      
+
       const p1Start = startSizes[draggingIndex]
       const p2Start = startSizes[draggingIndex + 1]
-      
+
       const p1Min = p1.minSize ?? 10
       const p1Max = p1.maxSize ?? 80
       const p2Min = p2.minSize ?? 10
       const p2Max = p2.maxSize ?? 80
-      
+
       // Calculate how much we can actually change panel 1
       // If deltaPercent > 0, we are growing p1 and shrinking p2
       const maxPositiveDelta = Math.max(0, Math.min(
         p1Max - p1Start,       // Space p1 has to grow
         p2Start - p2Min        // Space p2 has to shrink
       ))
-      
+
       // If deltaPercent < 0, we are shrinking p1 and growing p2
       const maxNegativeDelta = Math.min(0, Math.max(
         p1Min - p1Start,       // Space p1 has to shrink (negative)
         p2Start - p2Max        // Space p2 has to grow (negative)
       ))
-      
+
       // Clamp the delta
       let clampedDelta = deltaPercent
       if (clampedDelta > 0) {
@@ -153,17 +155,17 @@ export const AdjustableLayout = React.memo<AdjustableLayoutProps>(
       } else {
         clampedDelta = Math.max(clampedDelta, maxNegativeDelta)
       }
-      
+
       const newSizes = [...startSizes]
       newSizes[draggingIndex] = p1Start + clampedDelta
       newSizes[draggingIndex + 1] = p2Start - clampedDelta
-      
+
       // Normalize to 100% just in case of floating point drift
       const total = newSizes.reduce((sum, size) => sum + size, 0)
       const normalizedSizes = newSizes.map(size => (size / total) * 100)
-      
+
       setSizes(normalizedSizes)
-      
+
       // Notify parent
       if (onSectionResize) {
         onSectionResize(sections[draggingIndex].id, normalizedSizes[draggingIndex])
@@ -201,12 +203,12 @@ export const AdjustableLayout = React.memo<AdjustableLayoutProps>(
           ? { flex: `0 0 ${section.fixedSize}`, width: section.fixedSize, minWidth: section.fixedSize }
           : { flex: `0 0 ${section.fixedSize}`, height: section.fixedSize, minHeight: section.fixedSize }
         : null
-      
+
       return (
         <React.Fragment key={section.id}>
           <div
             className={cn(
-              "min-h-0 overflow-hidden bg-card border border-border rounded-md",
+              "min-h-0 overflow-hidden bg-card border border-border rounded-xl",
               section.className
             )}
             style={{
@@ -217,25 +219,35 @@ export const AdjustableLayout = React.memo<AdjustableLayoutProps>(
           >
             {section.content}
           </div>
-          
+
           {/* Show drag handle after this panel if it's not the last one */}
           {isResizable && (
             <div
               className={cn(
-                `${colorMap[dragHandleColor]} flex-shrink-0 transition-colors duration-200 relative group`,
-                orientation === "vertical" 
-                  ? "cursor-row-resize h-1 w-full" 
-                  : "cursor-col-resize w-1 h-full"
+                "flex-shrink-0 flex items-center justify-center relative group",
+                orientation === "vertical"
+                  ? "cursor-row-resize h-2 w-full"
+                  : "cursor-col-resize w-2 h-full"
               )}
               onMouseDown={(e) => handleMouseDown(index, e)}
             >
-              <div 
+              {/* Visible pill */}
+              <div
+                className={cn(
+                  `${colorMap[dragHandleColor]} transition-colors duration-200 rounded-full`,
+                  orientation === "vertical"
+                    ? "h-1 w-8"
+                    : "w-1 h-8"
+                )}
+              />
+              {/* Invisible large hit area */}
+              <div
                 className={cn(
-                  `absolute inset-0 ${hoverColorMap[dragHandleColor]}`,
-                  orientation === "vertical" 
-                    ? "h-3 -translate-y-1" 
-                    : "w-3 -translate-x-1"
-                )} 
+                  "absolute z-10",
+                  orientation === "vertical"
+                    ? "inset-x-0 -top-2 -bottom-2"
+                    : "inset-y-0 -left-2 -right-2"
+                )}
               />
             </div>
           )}
@@ -248,12 +260,13 @@ export const AdjustableLayout = React.memo<AdjustableLayoutProps>(
         ref={containerRef}
         className={cn(
           "flex overflow-hidden h-full gap-1 min-w-0",
+          padded && "p-4",
           orientation === "horizontal" ? "flex-row" : "flex-col",
           className
         )}
         {...props}
       >
-        {sections.map((section, index) => 
+        {sections.map((section, index) =>
           renderPanel(section, sizes[index], index)
         )}
       </div>

package/components/composites/NavigationList/NavigationList.tsx

@@ -12,6 +12,7 @@ export interface NavigationItem {
   url: string
   icon?: string
   isActive?: boolean
+  onClick?: (e: React.MouseEvent) => void
 }
 
 export interface NavigationListProps {
@@ -29,7 +30,13 @@ export const NavigationList = React.memo<NavigationListProps>(
             <SidebarMenuButton
               tooltip={item.title}
               isActive={item.isActive}
-              onClick={() => onItemClick?.(item)}
+              onClick={(e) => {
+                if (item.onClick) {
+                  e.preventDefault();
+                  item.onClick(e);
+                }
+                onItemClick?.(item)
+              }}
               asChild
             >
               <a href={item.url}>

package/components/composites/NavigationList/interfaces.ts

@@ -3,5 +3,6 @@ export interface NavigationItem {
   url: string;
   icon?: string;
   isActive?: boolean;
+  onClick?: (e: React.MouseEvent) => void;
   items?: NavigationItem[];
 }

package/components/composites/PromptInput/PromptInput.tsx

@@ -14,6 +14,8 @@ import {
   type PromptInputProps as AIPromptInputProps,
 } from "@/components/ai-elements/prompt-input";
 import type { FormEvent } from "react";
+import { Button } from "@/components/primitives/Button";
+import { Icon } from "@/components/primitives/Icon";
 
 export interface PromptInputBlockProps
   extends Omit<
@@ -80,7 +82,9 @@ export const PromptInput = React.memo<PromptInputBlockProps>(
         </PromptInputBody>
         <PromptInputFooter>
           <PromptInputTools>
-            {}
+            <Button variant="ghost" size="icon" className="h-8 w-8 rounded-full" type="button" disabled={disabled}>
+              <Icon name="plus" size="sm" />
+            </Button>
           </PromptInputTools>
           <PromptInputSubmit disabled={disabled} status={loading ? "submitted" : undefined} />
         </PromptInputFooter>

package/components/composites/index.ts

@@ -182,3 +182,7 @@ export type { LayoutProviderProps } from './LayoutProvider'
 // PromptInput Composite
 export { PromptInput } from './PromptInput'
 export type { PromptInputBlockProps } from './PromptInput'
+
+// ChatToggleButton Composite
+export { ChatToggleButton } from './ChatToggleButton'
+export type { ChatToggleButtonProps } from './ChatToggleButton'

package/components/features/RefinementPanel/RefinementPanel.tsx

@@ -227,7 +227,7 @@ export const RefinementPanel = React.memo<RefinementPanelProps>(
 
     if (activeApprovalRequest) {
       dialog = (
-        <div className="w-full flex-shrink-0 bg-background p-4">
+        <div className="w-full flex-shrink-0 bg-card p-4 rounded-2xl border shadow-sm overflow-hidden">
           <ApprovalCard
             actionRequest={activeApprovalRequest}
             reviewConfig={reviewConfig}
@@ -242,8 +242,8 @@ export const RefinementPanel = React.memo<RefinementPanelProps>(
       );
     } else if (fileChanges.length > 0) {
       dialog = (
-        <div className="w-full flex-shrink-0 border-t">
-          <div className="max-h-[40vh] overflow-y-auto bg-background">
+        <div className="w-full flex-shrink-0">
+          <div className="max-h-[40vh] overflow-y-auto bg-card rounded-2xl border shadow-sm overflow-hidden p-2">
             <FileChangeQueue
               changes={fileChanges}
               title="Review and approve these file changes"
@@ -264,12 +264,13 @@ export const RefinementPanel = React.memo<RefinementPanelProps>(
           showAvatars={true}
           className="flex-1 min-h-0"
         />
-        <div className="sticky bottom-0 z-10 bg-background border-t">
+        <div className="sticky bottom-0 z-10 p-4 bg-gradient-to-t from-card via-card to-transparent pt-6">
           <PromptInput
             dialog={dialog}
             placeholder={placeholder}
             onSubmit={onSubmit}
             loading={loading}
+            className="rounded-2xl border bg-background shadow-sm overflow-hidden"
           />
         </div>
       </div>

package/components/features/WorkflowObservabilityFeature/WorkflowObservabilityFeature.tsx

@@ -162,10 +162,11 @@ export const WorkflowObservabilityFeature = React.memo<WorkflowObservabilityFeat
         dragHandleColor="border"
         orientation="horizontal"
         resizable={false}
+        padded={false}
         sections={observabilitySections}
       />
     ) : (
-      <div className="rounded-lg border p-6 text-muted-foreground text-sm">
+      <div className="flex h-full items-center justify-center p-6 text-muted-foreground text-sm text-center">
         Select a run to inspect trace, events, and streams.
       </div>
     )
@@ -181,6 +182,7 @@ export const WorkflowObservabilityFeature = React.memo<WorkflowObservabilityFeat
       return [
         {
           id: "inbox",
+          className: "border-none bg-transparent",
           content: (
             <InboxPanel
               items={inbox.items}
@@ -214,6 +216,7 @@ export const WorkflowObservabilityFeature = React.memo<WorkflowObservabilityFeat
             dragHandleColor="primary"
             orientation="horizontal"
             resizable={false}
+            padded={false}
             sections={rootSections}
           />
         ) : (

package/components/index.ts

@@ -8,7 +8,7 @@ export type * from './blocks';
 export type * from './features';
 
 // Composites (value exports not covered by export type *)
-export { ModeSwitcher, ApprovalCard, ProjectSwitcher, FormReportsDrawerForm } from './composites';
+export { ModeSwitcher, ApprovalCard, ProjectSwitcher, FormReportsDrawerForm, ChatToggleButton } from './composites';
 export type { ApprovalCardProps, ActionRequest, ReviewConfig, ProjectSwitcherProps, Project, FormReportsDrawerFormProps } from './composites';
 export { getLayoutedElements, SectionLayout } from './blocks';
 export type { SectionLayoutSection } from './blocks';

package/dist/index.cjs

@@ -1402,7 +1402,13 @@ var NavigationList = React3__namespace.memo(
       {
         tooltip: item.title,
         isActive: item.isActive,
-        onClick: () => onItemClick == null ? void 0 : onItemClick(item),
+        onClick: (e) => {
+          if (item.onClick) {
+            e.preventDefault();
+            item.onClick(e);
+          }
+          onItemClick == null ? void 0 : onItemClick(item);
+        },
         asChild: true,
         children: /* @__PURE__ */ jsxRuntime.jsxs("a", { href: item.url, children: [
           item.icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: item.icon }),
@@ -1672,14 +1678,16 @@ var AdjustableLayout = React3__namespace.memo(
       storageKey,
       onSectionResize,
       dragHandleColor = "border",
-      className
+      className,
+      padded = false
     } = _b, props = __objRest(_b, [
       "sections",
       "orientation",
       "storageKey",
       "onSectionResize",
       "dragHandleColor",
-      "className"
+      "className",
+      "padded"
     ]);
     const colorMap = {
       primary: "bg-primary hover:bg-primary/90",
@@ -1688,13 +1696,6 @@ var AdjustableLayout = React3__namespace.memo(
       border: "bg-border hover:bg-border/80",
       muted: "bg-muted hover:bg-muted/80"
     };
-    const hoverColorMap = {
-      primary: "group-hover:bg-primary/30",
-      secondary: "group-hover:bg-secondary/30",
-      accent: "group-hover:bg-accent/30",
-      border: "group-hover:bg-border/30",
-      muted: "group-hover:bg-muted/30"
-    };
     const containerRef = React3__namespace.useRef(null);
     const defaultSizes = React3__namespace.useMemo(() => {
       const raw = sections.map((section) => {
@@ -1809,7 +1810,7 @@ var AdjustableLayout = React3__namespace.memo(
           "div",
           {
             className: cn(
-              "min-h-0 overflow-hidden bg-card border border-border rounded-md",
+              "min-h-0 overflow-hidden bg-card border border-border rounded-xl",
               section.className
             ),
             style: __spreadProps(__spreadValues({}, fixedStyle != null ? fixedStyle : { flex: `${size} 1 0%` }), {
@@ -1819,23 +1820,34 @@ var AdjustableLayout = React3__namespace.memo(
             children: section.content
           }
         ),
-        isResizable && /* @__PURE__ */ jsxRuntime.jsx(
+        isResizable && /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
             className: cn(
-              `${colorMap[dragHandleColor]} flex-shrink-0 transition-colors duration-200 relative group`,
-              orientation === "vertical" ? "cursor-row-resize h-1 w-full" : "cursor-col-resize w-1 h-full"
+              "flex-shrink-0 flex items-center justify-center relative group",
+              orientation === "vertical" ? "cursor-row-resize h-2 w-full" : "cursor-col-resize w-2 h-full"
             ),
             onMouseDown: (e) => handleMouseDown(index, e),
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                className: cn(
-                  `absolute inset-0 ${hoverColorMap[dragHandleColor]}`,
-                  orientation === "vertical" ? "h-3 -translate-y-1" : "w-3 -translate-x-1"
-                )
-              }
-            )
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn(
+                    `${colorMap[dragHandleColor]} transition-colors duration-200 rounded-full`,
+                    orientation === "vertical" ? "h-1 w-8" : "w-1 h-8"
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn(
+                    "absolute z-10",
+                    orientation === "vertical" ? "inset-x-0 -top-2 -bottom-2" : "inset-y-0 -left-2 -right-2"
+                  )
+                }
+              )
+            ]
           }
         )
       ] }, section.id);
@@ -1846,6 +1858,7 @@ var AdjustableLayout = React3__namespace.memo(
         ref: containerRef,
         className: cn(
           "flex overflow-hidden h-full gap-1 min-w-0",
+          padded && "p-4",
           orientation === "horizontal" ? "flex-row" : "flex-col",
           className
         )
@@ -1965,7 +1978,8 @@ var SectionLayout = React3__namespace.memo(
       onSectionResize,
       resizable = true,
       dragHandleColor = "border",
-      className
+      className,
+      padded = true
     } = _b, props = __objRest(_b, [
       "sections",
       "orientation",
@@ -1973,7 +1987,8 @@ var SectionLayout = React3__namespace.memo(
       "onSectionResize",
       "resizable",
       "dragHandleColor",
-      "className"
+      "className",
+      "padded"
     ]);
     const transformedSections = sections.map((section) => __spreadProps(__spreadValues({}, section), {
       resizable,
@@ -1990,7 +2005,8 @@ var SectionLayout = React3__namespace.memo(
         storageKey,
         onSectionResize,
         dragHandleColor,
-        className
+        className,
+        padded
       }, props)
     );
   }
@@ -4986,7 +5002,7 @@ var PromptInput2 = React3__namespace.memo(
         }
       ) }),
       /* @__PURE__ */ jsxRuntime.jsxs(PromptInputFooter, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(PromptInputTools, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(PromptInputTools, { children: /* @__PURE__ */ jsxRuntime.jsx(Button2, { variant: "ghost", size: "icon", className: "h-8 w-8 rounded-full", type: "button", disabled, children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "plus", size: "sm" }) }) }),
         /* @__PURE__ */ jsxRuntime.jsx(PromptInputSubmit, { disabled, status: loading ? "submitted" : void 0 })
       ] })
     ] }));
@@ -5577,7 +5593,7 @@ var RefinementPanel = React3__namespace.memo(
     }, [activeApprovalRequest]);
     let dialog = null;
     if (activeApprovalRequest) {
-      dialog = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full flex-shrink-0 bg-background p-4", children: /* @__PURE__ */ jsxRuntime.jsx(
+      dialog = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full flex-shrink-0 bg-card p-4 rounded-2xl border shadow-sm overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
         ApprovalCard,
         {
           actionRequest: activeApprovalRequest,
@@ -5591,7 +5607,7 @@ var RefinementPanel = React3__namespace.memo(
         }
       ) });
     } else if (fileChanges.length > 0) {
-      dialog = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full flex-shrink-0 border-t", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-h-[40vh] overflow-y-auto bg-background", children: /* @__PURE__ */ jsxRuntime.jsx(
+      dialog = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-h-[40vh] overflow-y-auto bg-card rounded-2xl border shadow-sm overflow-hidden p-2", children: /* @__PURE__ */ jsxRuntime.jsx(
         FileChangeQueue,
         {
           changes: fileChanges,
@@ -5612,13 +5628,14 @@ var RefinementPanel = React3__namespace.memo(
           className: "flex-1 min-h-0"
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sticky bottom-0 z-10 bg-background border-t", children: /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sticky bottom-0 z-10 p-4 bg-gradient-to-t from-card via-card to-transparent pt-6", children: /* @__PURE__ */ jsxRuntime.jsx(
         PromptInput2,
         {
           dialog,
           placeholder,
           onSubmit,
-          loading
+          loading,
+          className: "rounded-2xl border bg-background shadow-sm overflow-hidden"
         }
       ) })
     ] });
@@ -11419,7 +11436,7 @@ var InboxPanel = React3__namespace.memo(
         title ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-sm font-semibold text-muted-foreground", children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", {}),
         headerAction ? /* @__PURE__ */ jsxRuntime.jsx("div", { children: headerAction }) : null
       ] }) : null,
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 pb-2", children: /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 pt-4 pb-2", children: /* @__PURE__ */ jsxRuntime.jsx(
         Input2,
         {
           "aria-label": "Search inbox items",
@@ -11548,9 +11565,10 @@ var WorkflowObservabilityFeature = React3__namespace.memo(
         dragHandleColor: "border",
         orientation: "horizontal",
         resizable: false,
+        padded: false,
         sections: observabilitySections
       }
-    ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg border p-6 text-muted-foreground text-sm", children: "Select a run to inspect trace, events, and streams." });
+    ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center p-6 text-muted-foreground text-sm text-center", children: "Select a run to inspect trace, events, and streams." });
     const rootSections = React3__namespace.useMemo(() => {
       var _a, _b;
       if (!inbox) {
@@ -11561,6 +11579,7 @@ var WorkflowObservabilityFeature = React3__namespace.memo(
       return [
         {
           id: "inbox",
+          className: "border-none bg-transparent",
           content: /* @__PURE__ */ jsxRuntime.jsx(
             InboxPanel,
             {
@@ -11593,6 +11612,7 @@ var WorkflowObservabilityFeature = React3__namespace.memo(
         dragHandleColor: "primary",
         orientation: "horizontal",
         resizable: false,
+        padded: false,
         sections: rootSections
       }
     ) : observabilityContent });
@@ -11683,6 +11703,7 @@ Object.defineProperty(exports, "applyNodeChanges", {
 });
 exports.AIDocEditor = AIDocEditor;
 exports.ApprovalCard = ApprovalCard;
+exports.ChatToggleButton = ChatToggleButton;
 exports.DashboardFeature = DashboardFeature;
 exports.FormReportsDrawerForm = FormReportsDrawerForm;
 exports.FormReportsFeature = FormReportsFeature;