@vertesia/ui 0.79.0 → 0.79.2

package/src/features/agent/chat/ModernAgentOutput/InlineSlidingPlanPanel.tsx

@@ -1,4 +1,5 @@
 import { Plan } from "@vertesia/common";
+import { Badge, Button } from "@vertesia/ui/core";
 import { AlertCircle, CheckCircle, Circle, Clock, X } from "lucide-react";
 
 interface InlinePlanPanelProps {
@@ -27,21 +28,15 @@ export default function InlineSlidingPlanPanel({
 
   // Render the normal panel
   return (
-    <div
-      className="fixed top-24 right-8 bottom-24 z-50 bg-white dark:bg-gray-900 shadow-xl border border-gray-200 dark:border-gray-700 overflow-hidden"
-      style={{ width: "350px" }}
-    >
-      <div className="flex items-center justify-between p-3 border-b border-gray-200 dark:border-gray-800">
-        <h3 className="font-bold text-gray-800 dark:text-gray-200 text-base">
+    <div className="h-full shadow-xl border border-muted/20 overflow-hidden">
+      <div className="flex items-center justify-between p-3 border-b border-muted/20">
+        <h3 className="font-bold text-base">
           Plan
         </h3>
-        <button
-          className="p-1 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-full text-gray-500 dark:text-gray-400"
-          onClick={onClose}
-        >
-          <X className="h-4 w-4" />
+        <Button variant={"ghost"} onClick={onClose} >
+          <X className="size-4" />
           <span className="sr-only">Close</span>
-        </button>
+        </Button>
       </div>
       <div
         className="p-3 overflow-y-auto"
@@ -51,8 +46,8 @@ export default function InlineSlidingPlanPanel({
         }}
       >
         {/* Plan Summary - count only tasks, excluding main workstream */}
-        <div className="mb-3 p-2 bg-blue-50 dark:bg-blue-900/20 rounded-md border border-blue-100 dark:border-blue-800">
-          <div className="text-xs font-medium text-blue-700 dark:text-blue-300 mb-1">
+        <div className="mb-3 p-2 bg-info rounded-md border border-info">
+          <div className="text-xs font-medium text-info mb-1">
             Task Progress
           </div>
           <div className="flex items-center gap-2">
@@ -87,13 +82,13 @@ export default function InlineSlidingPlanPanel({
 
               return (
                 <>
-                  <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
+                  <div className="w-full bg-muted rounded-full h-2">
                     <div
-                      className="bg-blue-600 h-2 rounded-full"
+                      className="bg-background h-2 rounded-full"
                       style={{ width: `${progressPercentage}%` }}
                     />
                   </div>
-                  <span className="text-xs text-gray-600 dark:text-gray-400">
+                  <span className="text-xs text-muted">
                     {totalTasks > 0 ? `${completedTasks}/${totalTasks}` : "0/0"}
                   </span>
                 </>
@@ -105,39 +100,37 @@ export default function InlineSlidingPlanPanel({
         {/* Plan selector - only shown when multiple plans exist */}
         {plans.length > 1 && (
           <div className="mb-3 flex items-center justify-between">
-            <button
-              className="text-xs px-2 py-1 rounded-md bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-300 disabled:opacity-50"
+            <Button variant={"ghost"}
               onClick={() =>
                 onChangePlan(Math.min(plans.length - 1, activePlanIndex + 1))
               }
               disabled={activePlanIndex >= plans.length - 1}
             >
               Older Plan
-            </button>
-            <div className="text-xs text-gray-500 dark:text-gray-400">
+            </Button>
+            <div className="text-xs text-muted">
               {plans[activePlanIndex]?.timestamp
                 ? new Date(
                   plans[activePlanIndex].timestamp,
                 ).toLocaleTimeString()
                 : "Unknown time"}
             </div>
-            <button
-              className="text-xs px-2 py-1 rounded-md bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-300 disabled:opacity-50"
+            <Button variant={"ghost"}
               onClick={() => onChangePlan(Math.max(0, activePlanIndex - 1))}
               disabled={activePlanIndex <= 0}
             >
               Newer Plan
-            </button>
+            </Button>
           </div>
         )}
 
         {/* Detailed Plan Steps */}
-        <div className="rounded-md border border-gray-200 dark:border-gray-800">
-          <div className="p-2 border-b border-gray-200 dark:border-gray-800 bg-gray-50 dark:bg-gray-900/50">
+        <div className="rounded-md border border-muted/30">
+          <div className="p-2 border-b border-muted/30 bg-muted">
             <div className="font-medium text-xs">Step-by-Step Plan</div>
           </div>
 
-          <div className="divide-y divide-gray-100 dark:divide-gray-800 max-h-[calc(100vh-350px)] overflow-y-auto">
+          <div className="divide-y divide-muted/20 max-h-[calc(100vh-350px)] overflow-y-auto">
             {plan.plan && plan.plan.length > 0 ? (
               plan.plan.map((task, index) => {
                 // Extract task info with null checks
@@ -156,53 +149,44 @@ export default function InlineSlidingPlanPanel({
 
                 // Determine status icon and style
                 let StatusIcon = Circle;
-                let statusColor = "text-gray-400";
-                let bgColor = "";
+                let statusColor = "text-muted";
 
                 if (status === "in_progress") {
                   StatusIcon = Clock;
-                  statusColor = "text-blue-500";
-                  bgColor = "bg-blue-50/50 dark:bg-blue-900/10";
+                  statusColor = "text-info";
                 } else if (status === "completed") {
                   StatusIcon = CheckCircle;
-                  statusColor = "text-green-500";
+                  statusColor = "text-success";
                 }
 
                 return (
-                  <div key={index} className={`flex p-3 my-1 ${bgColor}`}>
-                    <div className={`mr-2 mt-0.5 flex-shrink-0 ${statusColor}`}>
-                      <StatusIcon className="h-3.5 w-3.5" />
+                  <div key={index} className={`flex p-3 my-1`}>
+                    <div className={`mr-2 mt-0.5 flex-shrink-0 text-muted`}>
+                      {taskId}
                     </div>
                     <div className="w-full">
-                      <div className="text-sm font-medium text-gray-800 dark:text-gray-200 mb-2">
+                      <div className="text-sm font-medium mb-2 text-muted">
                         {taskGoal}
                       </div>
-                      <div className="mt-1 flex justify-between items-center">
-                        <span className="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300">
-                          {taskId}
-                        </span>
-                        <span
-                          className={`ml-2 text-xs px-2 py-0.5 rounded-full ${status === "completed"
-                              ? "bg-green-100 text-green-600 dark:bg-green-900/30 dark:text-green-400"
-                              : status === "in_progress"
-                                ? "bg-blue-100 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400"
-                                : "bg-gray-100 text-gray-500 dark:bg-gray-800 dark:text-gray-400"
-                            }`}
-                        >
+                      <div className="mt-1 flex justify-end items-center">
+                        <div className={`mr-2 mt-0.5 flex-shrink-0 ${statusColor}`}>
+                          <StatusIcon className="size-3.5" />
+                        </div>
+                        <Badge variant={status === "completed" ? "success" : status === "in_progress" ? "info" : "default"}>
                           {status === "completed"
                             ? "Completed"
                             : status === "in_progress"
                               ? "In Progress"
                               : "Pending"}
-                        </span>
+                        </Badge>
                       </div>
                     </div>
                   </div>
                 );
               })
             ) : (
-              <div className="p-3 text-center text-gray-500 dark:text-gray-400 italic">
-                <AlertCircle className="h-4 w-4 mx-auto mb-2 text-amber-500" />
+              <div className="p-3 text-center text-muted italic">
+                <AlertCircle className="size-4 mx-auto mb-2 text-attention" />
                 <p className="text-xs">No plan has been detected yet</p>
                 <p className="text-xs mt-1">
                   Plans will appear here when the agent creates one
@@ -242,13 +226,13 @@ export default function InlineSlidingPlanPanel({
 
                     if (status === "in_progress") {
                       StatusIcon = Clock;
-                      statusColor = "text-blue-500";
-                      statusBg = "bg-blue-100 dark:bg-blue-800/30";
+                      statusColor = "text-info";
+                      statusBg = "bg-info/20";
                       statusText = "In Progress";
                     } else if (status === "completed") {
                       StatusIcon = CheckCircle;
-                      statusColor = "text-green-500";
-                      statusBg = "bg-green-100 dark:bg-green-800/30";
+                      statusColor = "text-success";
+                      statusBg = "bg-success/20";
                       statusText = "Completed";
                     }
 

package/src/features/agent/chat/ModernAgentOutput/PlanPanel.tsx

@@ -7,6 +7,7 @@ interface PlanPanelProps {
     isVisible: boolean;
 }
 
+// todo: remove this file
 export default function PlanPanel({ plan, workstreamStatus, isVisible }: PlanPanelProps) {
     if (!isVisible) return null;
 

package/src/features/agent/chat/ModernAgentOutput/SlidingPlanPanel.tsx

@@ -12,14 +12,14 @@ interface PlanPanelProps {
 export default function SlidingPlanPanel({ plan, workstreamStatus, isOpen, onClose }: PlanPanelProps) {
     return (
         plan && (
-            <SlideInPanel isOpen={isOpen} onClose={onClose} title="Agent Plan" width="350px">
+            <SlideInPanel isOpen={isOpen} onClose={onClose} title="Agent Plan">
                 {/* Plan Summary */}
-                <div className="mb-4 p-3 bg-blue-50 dark:bg-blue-900/20 rounded-md border border-blue-100 dark:border-blue-800">
-                    <div className="text-sm font-medium text-blue-700 dark:text-blue-300 mb-1">Plan Progress</div>
+                <div className="mb-4 p-3 bg-info rounded-md border border-info">
+                    <div className="text-sm font-medium text-info mb-1">Plan Progress</div>
                     <div className="flex items-center gap-2">
-                        <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
+                        <div className="w-full bg-muted rounded-full h-2.5">
                             <div
-                                className="bg-blue-600 h-2.5 rounded-full"
+                                className="bg-info h-2.5 rounded-full"
                                 style={{
                                     width: `${plan.plan && plan.plan.length
                                         ? Math.round(
@@ -34,7 +34,7 @@ export default function SlidingPlanPanel({ plan, workstreamStatus, isOpen, onClo
                                 }}
                             />
                         </div>
-                        <span className="text-xs text-gray-600 dark:text-gray-400">
+                        <span className="text-xs text-muted">
                             {plan.plan && plan.plan.length
                                 ? `${Array.from(workstreamStatus.values()).filter((status) => status === "completed").length}/${workstreamStatus.size}`
                                 : "0/0"}
@@ -43,8 +43,8 @@ export default function SlidingPlanPanel({ plan, workstreamStatus, isOpen, onClo
                 </div>
 
                 {/* Detailed Plan Steps */}
-                <div className="rounded-md border border-gray-200 dark:border-gray-800">
-                    <div className="p-3 border-b border-gray-200 dark:border-gray-800 bg-gray-50 dark:bg-gray-900/50">
+                <div className="rounded-md border border-muted">
+                    <div className="p-3 border-b border-muted bg-muted/50">
                         <div className="font-medium text-sm">Step-by-Step Plan</div>
                     </div>
 

package/src/features/agent/chat/ModernAgentOutput/WorkstreamTabs.tsx

@@ -62,14 +62,14 @@ export default function WorkstreamTabs({
   }
 
   return (
-    <div className="flex overflow-x-auto space-x-1 pb-2 mb-2 border-b-2 border-blue-200 dark:border-blue-900 sticky top-0 bg-white dark:bg-gray-900 z-10 pt-1">
+    <div className="flex overflow-x-auto space-x-1 mb-2 border-b-2 border-muted/20 sticky top-0 z-10 pt-1">
       {sortedWorkstreams.map(([id, name]) => (
         <button
           key={id}
           className={`px-3 py-1.5 text-xs font-medium whitespace-nowrap transition-colors flex items-center gap-1.5
                         ${activeWorkstream === id
-              ? "bg-blue-200 text-blue-800 dark:bg-blue-800 dark:text-blue-200 border-b-2 border-blue-500"
-              : "text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800/30 border-b-2 border-transparent"
+              ? "bg-info text-info border-b-2 border-info"
+              : "text-muted hover:bg-muted border-b-2 border-transparent"
             }`}
           onClick={() => onSelectWorkstream(id)}
           title={name.length > 20 ? name : undefined}
@@ -79,10 +79,10 @@ export default function WorkstreamTabs({
           {count && count.has(id) && count.get(id)! > 0 && (
             <div className="flex items-center space-x-1">
               <span
-                className={`inline-flex items-center justify-center w-4 h-4 text-xs
+                className={`inline-flex items-center justify-center size-4 text-xs rounded-full
                                 ${activeWorkstream === id
-                    ? "bg-blue-200 text-blue-800 dark:bg-blue-800 dark:text-blue-200"
-                    : "bg-gray-200 text-gray-600 dark:bg-gray-700 dark:text-gray-300"
+                    ? "bg-info text-info"
+                    : "bg-muted text-muted"
                   }`}
               >
                 {count.get(id)}
@@ -91,9 +91,9 @@ export default function WorkstreamTabs({
               {completionStatus &&
                 id !== "all" &&
                 (completionStatus.get(id) ? (
-                  <CheckCircle className="h-3 w-3 text-green-500" />
+                  <CheckCircle className="size-3 text-success" />
                 ) : (
-                  <Clock className="h-3 w-3 text-amber-500" />
+                  <Clock className="size-3 text-attention" />
                 ))}
             </div>
           )}

package/src/features/facets/CollectionsFacetsNav.tsx

@@ -1,6 +1,7 @@
 import { Filter as BaseFilter, FilterProvider, FilterBtn, FilterBar, FilterClear, FilterGroup } from '@vertesia/ui/core';
 import { useState } from 'react';
 import { SearchInterface } from './utils/SearchInterface';
+import { useUserSession } from '@vertesia/ui/session';
 
 interface CollectionsFacetsNavProps {
     facets: {
@@ -13,6 +14,8 @@ interface CollectionsFacetsNavProps {
 // Hook to create filter groups for collections
 export function useCollectionsFilterGroups(facets: CollectionsFacetsNavProps['facets']): FilterGroup[] {
     void facets;
+    const { typeRegistry } = useUserSession();
+
     const customFilterGroups: FilterGroup[] = [];
 
     // Add name filter as text type
@@ -24,6 +27,24 @@ export function useCollectionsFilterGroups(facets: CollectionsFacetsNavProps['fa
     };
     customFilterGroups.push(nameFilterGroup);
 
+    // add type filter as select type
+    if (typeRegistry) {
+        const typeOptions = typeRegistry.types.map(type => {
+            return {
+                label: type.name,
+                value: type.id
+            }
+        });
+        const typeFilterGroup = {
+            name: 'types',
+            placeholder: 'Type',
+            type: 'select' as const,
+            multiple: true,
+            options: typeOptions
+        };
+        customFilterGroups.push(typeFilterGroup);
+    }
+
     return customFilterGroups;
 }
 

package/src/features/facets/InteractionsFacetsNav.tsx

@@ -7,6 +7,7 @@ interface InteractionsFacetsNavProps {
         tags?: any[];
     };
     search: SearchInterface;
+    env?: string | null;
 }
 
 // Hook to create filter groups for interactions
@@ -32,6 +33,14 @@ export function useInteractionsFilterGroups(facets: InteractionsFacetsNavProps['
     };
     customFilterGroups.push(promptNameFilterGroup);
 
+    const ModelFilterGroup = {
+        name: 'model',
+        placeholder: 'Model',
+        type: 'text' as const,
+        multiple: false
+    };
+    customFilterGroups.push(ModelFilterGroup);
+
     // Add tags filter as stringList type (allows custom input)
     const tagsFilterGroup = {
         name: 'tags',
@@ -46,10 +55,11 @@ export function useInteractionsFilterGroups(facets: InteractionsFacetsNavProps['
 
 // Hook to create filter change handler for interactions
 export function useInteractionsFilterHandler(search: SearchInterface) {
+
     return (newFilters: BaseFilter[]) => {
         if (newFilters.length === 0) {
-            // Clear filters without applying defaults - user wants to remove all filters
-            search.clearFilters(true, false);
+            search.clearFilters(true, true);
+
             return;
         }
 
@@ -79,7 +89,7 @@ export function useInteractionsFilterHandler(search: SearchInterface) {
             }
         });
 
-        search.search();
+        search.search(true);
     };
 }
 

package/src/features/facets/utils/SearchInterface.tsx

@@ -1,8 +1,12 @@
+interface defaultKeys {
+    [key: string]: string;
+}
 export interface SearchInterface {
     getFilterValue(name: string): any;
     setFilterValue(name: string, value: any): void;
     clearFilters(autoSearch?: boolean, applyDefaults?: boolean): void;
-    search(): Promise<boolean | undefined>;
+    search(applyDefaults?: boolean): Promise<boolean | undefined>;
+    setDefaultKeys(keys: defaultKeys[]): void;
     readonly isRunning: boolean;
     query: Record<string, any>;
 }

package/src/features/facets/utils/VTypeFacet.tsx

@@ -1,9 +1,10 @@
 import { FacetBucket } from "@vertesia/common";
 import { FilterGroup } from "@vertesia/ui/core";
+import { TypeRegistry } from "@vertesia/ui/session";
 
 interface VTypeFacetProps {
     buckets: FacetBucket[];
-    typeRegistry: any;
+    typeRegistry?: TypeRegistry;
     type?: 'select';
     multiple?: boolean;
 }
@@ -11,6 +12,9 @@ interface VTypeFacetProps {
 export function VTypeFacet({ buckets, typeRegistry, type = 'select', multiple = false }: VTypeFacetProps) {
     // Create a map for quick lookups of type names and counts
     const typeDataMap = new Map();
+    if (!typeRegistry) {
+        console.warn("Type names cannot be resolved");
+    }
     buckets.forEach((bucket) => {
         let name;
         let typeId = bucket._id;
@@ -19,7 +23,7 @@ export function VTypeFacet({ buckets, typeRegistry, type = 'select', multiple =
             typeId = "Document";
             name = "Document";
         } else {
-            name = typeRegistry.getTypeName(bucket._id);
+            name = typeRegistry?.getTypeName(bucket._id);
             if (!name) {
                 console.warn("Content Object Type not found", bucket._id);
                 name = bucket._id;

package/src/features/layout/GenericPageNavHeader.tsx

@@ -2,7 +2,9 @@ import clsx from 'clsx';
 import { ReactElement, ReactNode } from 'react';
 
 import { ChevronRight, Info } from 'lucide-react';
-import { VTooltip } from '@vertesia/ui/core';
+import { VTooltip, Breadcrumbs } from '@vertesia/ui/core';
+import { capitalize } from 'lodash-es';
+import { useNavigate } from '@vertesia/ui/router';
 
 interface GenericPageNavHeaderProps {
     title: string | ReactElement;
@@ -12,22 +14,83 @@ interface GenericPageNavHeaderProps {
     isCompact?: boolean
     children?: ReactNode
     className?: string
+    useDynamicBreadcrumbs?: boolean;
 }
 
-export function GenericPageNavHeader({ className, children, title, description, actions, breadcrumbs, isCompact = false }: GenericPageNavHeaderProps) {
+export function GenericPageNavHeader({ className, children, title, description, actions, breadcrumbs, isCompact = false, useDynamicBreadcrumbs = true }: GenericPageNavHeaderProps) {
+    const navigate = useNavigate();
+
+    const buildBreadcrumbLabel = (entry: any): string => {
+        const href = entry?.href || '';
+        if (!href) return 'Page';
+        
+        const cleanHref = href.split('#')[0].split('?')[0];
+        const pathSegments: string[] = (cleanHref as string).split('/').filter((segment: string) => segment.length > 0);
+        
+        if (pathSegments.length === 3) {
+            const secondSegment = pathSegments[1];
+            return `${capitalize(secondSegment)} Detail`;
+        } else if (pathSegments.length >= 2) {
+            return capitalize(pathSegments[pathSegments.length - 1]);
+        } else if (pathSegments.length === 1) {
+            return capitalize(pathSegments[0]);
+        }
+        
+        return 'Page';
+    }
+
+    // Build breadcrumb items from history chain and current breadcrumbs
+    const buildBreadcrumbItems = (): Array<{ label: string, href?: string, onClick?: () => void }> => {
+        const items: Array<{ label: string, href?: string, onClick?: () => void, clearHistory?: boolean }> = [];
+
+        // Add items from history chain
+        if (useDynamicBreadcrumbs && typeof window !== 'undefined' && window.history.state?.historyChain) {
+            const historyChain = window.history.state.historyChain;
+            historyChain.forEach((entry: any, index: number) => {
+                const stepsBack = historyChain.length - index;
+                items.push({
+                    label: buildBreadcrumbLabel(entry),
+                    href: entry.href,
+                    onClick: () => window.history.go(-stepsBack)
+                });
+            });
+        }
+
+        // Add current page breadcrumbs
+        if (breadcrumbs && breadcrumbs.length > 0) {
+            breadcrumbs.forEach((breadcrumb: any) => {
+                // Extract text content from React element
+                const label = typeof breadcrumb?.props?.children === 'string'
+                    ? breadcrumb.props.children
+                    : 'Page';
+
+                items.push(( breadcrumb?.props?.href ) ? {
+                    href: breadcrumb?.props?.href,
+                    label: label,
+                    onClick: () => navigate(breadcrumb.props.href, { replace: breadcrumb.props.clearBreadcrumbs }),
+                } : {
+                    label: label
+                });
+            });
+        }
+
+        return items;
+    };
+
+    const breadcrumbItems = buildBreadcrumbItems();
+
     return (
         <div className={clsx(isCompact ? 'pb-0' : 'pb-2', 'p-4 flex flex-col', className)}>
             <div className='flex items-start gap-4'>
                 <div className="w-full flex place-content-between h-auto min-h-8 flex-col items-start">
                     <nav className="flex-1 flex justify-start text-xs">
-                        {breadcrumbs?.map((breadcrumb, index) => {
-                            return (
-                                <div className="flex items-center text-muted" key={index}>
-                                    {breadcrumb}
-                                    {index < breadcrumbs.length - 1 && <ChevronRight className="w-3.5 h-3.5" />}
-                                </div>
-                            )
-                        })}
+                        {breadcrumbItems.length > 0 && (
+                            <Breadcrumbs
+                                path={breadcrumbItems}
+                                separator={<ChevronRight className="w-3.5 h-3.5" />}
+                                maxItems={4}
+                            />
+                        )}
                     </nav>
                     <div className='flex gap-2 items-center'>
                         <h1 className="text-xl font-semibold break-all">{title}</h1>

package/src/features/store/collections/BrowseCollectionView.tsx

@@ -2,6 +2,7 @@ import { useUserSession, TypeRegistry } from "@vertesia/ui/session";
 import { Collection } from "@vertesia/common";
 import { DocumentSearchResultsWithDropZone, DocumentSearchResults } from "../objects/DocumentSearchResults";
 import { useToast } from "@vertesia/ui/core";
+import { useDocumentSearch } from "../objects/search/DocumentSearchContext";
 
 
 interface BrowseCollectionViewProps {
@@ -10,6 +11,9 @@ interface BrowseCollectionViewProps {
 export function BrowseCollectionView({ collection }: BrowseCollectionViewProps) {
     const toast = useToast();
     const { client, typeRegistry } = useUserSession();
+    const search = useDocumentSearch();
+    search.query.all_revisions = true;
+    
     const onUploadDone = async (objectIds: string[]) => {
         if (objectIds.length > 0) {
             await client.store.collections.addMembers(collection.id, objectIds).catch(err => {

package/src/features/store/collections/CreateCollection.tsx

@@ -1,5 +1,5 @@
 import { CreateCollectionPayload } from "@vertesia/common";
-import { useToast, VModalBody, FormItem, Styles, VModalFooter, Input, Switch, Button, VModal, VModalTitle } from "@vertesia/ui/core";
+import { useToast, VModalBody, FormItem, VModalFooter, Input, Switch, Button, VModal, VModalTitle, Textarea } from "@vertesia/ui/core";
 import { SelectContentType } from "../types/SelectContentType";
 import { useNavigate } from "@vertesia/ui/router";
 import { useUserSession } from "@vertesia/ui/session";
@@ -80,10 +80,9 @@ export function CreateCollectionForm({ onClose, redirect = true, onAddToCollecti
                     <Input type="text" value={payload.name || ""} onChange={(value) => setPayloadProp("name", value)} />
                 </FormItem>
                 <FormItem label="Description" className="mt-2">
-                    <textarea
-                        className={Styles.INPUT}
+                    <Textarea
                         value={payload.description || ""}
-                        onChange={(ev) => setPayloadProp("description", ev.target.value)}
+                        onChange={(ev) => setPayloadProp("description", ev)}
                     />
                 </FormItem>
                 <FormItem label="Dynamic Collection" className="mt-2" direction="row" description="Dynamically fetch content for the collection based on a query. If not enabled, then content must be added by users or agents.">