@schandlergarcia/sf-web-components 1.8.0 → 1.9.1

package/src/components/library/data/{useDataSource.jsx → useDataSource.tsx}

@@ -1,6 +1,13 @@
 import { useMemo } from "react";
 import { useDataMode } from "./DataModeProvider";
 
+export type DataSourceValue<T> = T | (() => T);
+
+export interface UseDataSourceOptions<T> {
+  sample: DataSourceValue<T>;
+  live: DataSourceValue<T>;
+}
+
 /**
  * Select between sample and live data based on the global data mode.
  *
@@ -23,11 +30,11 @@ import { useDataMode } from "./DataModeProvider";
  *   live: () => computeFromAPI(apiData),
  * });
  */
-export default function useDataSource({ sample, live }) {
+export default function useDataSource<T>({ sample, live }: UseDataSourceOptions<T>): T {
   const { mode } = useDataMode();
 
   return useMemo(() => {
     const source = mode === "sample" ? sample : live;
-    return typeof source === "function" ? source() : source;
+    return typeof source === "function" ? (source as () => T)() : source;
   }, [mode, sample, live]);
 }

package/src/components/library/data/{usePageFilters.jsx → usePageFilters.tsx}

@@ -1,5 +1,41 @@
 import { useState, useMemo, useCallback } from "react";
-import { applyFilters, sortByKey } from "./filterUtils";
+import { applyFilters, sortByKey, FilterDefinition } from "./filterUtils";
+
+export type SortDirection = "asc" | "desc";
+
+export interface SortState {
+  key: string;
+  direction: SortDirection;
+}
+
+export interface DateRange {
+  start?: Date | string;
+  end?: Date | string;
+}
+
+export type FilterValue = string | boolean | DateRange | null;
+
+export interface FilterValues {
+  [key: string]: FilterValue;
+}
+
+export interface UsePageFiltersOptions<T> {
+  data?: T[];
+  filters?: FilterDefinition[];
+  defaultSort?: SortState | null;
+}
+
+export interface UsePageFiltersReturn<T> {
+  values: FilterValues;
+  setFilter: (id: string, value: FilterValue) => void;
+  resetFilters: () => void;
+  sort: SortState | null;
+  setSort: (key: string | null, direction?: SortDirection) => void;
+  toggleSort: (key: string) => void;
+  filteredData: T[];
+  sortedData: T[];
+  activeFilterCount: number;
+}
 
 /**
  * Hook for managing page-level filter and sort state.
@@ -21,9 +57,13 @@ import { applyFilters, sortByKey } from "./filterUtils";
  *   defaultSort: { key: "timestamp", direction: "desc" },
  * });
  */
-export default function usePageFilters({ data = [], filters = [], defaultSort = null } = {}) {
+export default function usePageFilters<T = any>({
+  data = [],
+  filters = [],
+  defaultSort = null,
+}: UsePageFiltersOptions<T> = {}): UsePageFiltersReturn<T> {
   const initialValues = useMemo(() => {
-    const v = {};
+    const v: FilterValues = {};
     for (const f of filters) {
       if (f.defaultValue !== undefined) {
         v[f.id] = f.defaultValue;
@@ -40,10 +80,10 @@ export default function usePageFilters({ data = [], filters = [], defaultSort =
     return v;
   }, [filters]);
 
-  const [values, setValues] = useState(initialValues);
-  const [sort, setSortState] = useState(defaultSort);
+  const [values, setValues] = useState<FilterValues>(initialValues);
+  const [sort, setSortState] = useState<SortState | null>(defaultSort);
 
-  const setFilter = useCallback((id, value) => {
+  const setFilter = useCallback((id: string, value: FilterValue) => {
     setValues((prev) => ({ ...prev, [id]: value }));
   }, []);
 
@@ -51,11 +91,11 @@ export default function usePageFilters({ data = [], filters = [], defaultSort =
     setValues(initialValues);
   }, [initialValues]);
 
-  const setSort = useCallback((key, direction) => {
+  const setSort = useCallback((key: string | null, direction?: SortDirection) => {
     setSortState(key ? { key, direction: direction ?? "asc" } : null);
   }, []);
 
-  const toggleSort = useCallback((key) => {
+  const toggleSort = useCallback((key: string) => {
     setSortState((prev) => {
       if (prev?.key !== key) return { key, direction: "asc" };
       if (prev.direction === "asc") return { key, direction: "desc" };
@@ -77,7 +117,7 @@ export default function usePageFilters({ data = [], filters = [], defaultSort =
     let count = 0;
     for (const f of filters) {
       const v = values[f.id];
-      if (f.type === "search" && v && v.trim()) count++;
+      if (f.type === "search" && v && typeof v === "string" && v.trim()) count++;
       else if (f.type === "select" && v && v !== "all") count++;
       else if (f.type === "toggle" && v) count++;
       else if (f.type === "dateRange" && v) count++;

package/src/components/library/{index.jsx → index.ts}

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 export { default as AppThemeProvider, useThemeMode } from "./theme/AppThemeProvider";
 
@@ -105,21 +105,21 @@ export { default as HeroUISeparator, Separator } from "./heroui/Separator";
 export { default as HeroUIPagination, Pagination } from "./heroui/Pagination";
 
 // Breadcrumb subcomponents for shadcn compatibility
-export const Breadcrumb = ({ children, ...props }) => React.createElement('nav', { 'aria-label': 'breadcrumb', ...props }, children);
-export const BreadcrumbList = ({ children, ...props }) => React.createElement('ol', { className: 'flex flex-wrap items-center gap-1.5 break-words text-sm text-slate-500 dark:text-slate-400', ...props }, children);
-export const BreadcrumbItem = ({ children, ...props }) => React.createElement('li', { className: 'inline-flex items-center gap-1.5', ...props }, children);
-export const BreadcrumbLink = ({ href, children, asChild, ...props }) => asChild ? React.createElement('span', props, children) : React.createElement('a', { href, className: 'transition-colors hover:text-slate-900 dark:hover:text-slate-50', ...props }, children);
-export const BreadcrumbPage = ({ children, ...props }) => React.createElement('span', { role: 'link', 'aria-disabled': 'true', 'aria-current': 'page', className: 'font-normal text-slate-900 dark:text-slate-50', ...props }, children);
-export const BreadcrumbSeparator = ({ children, ...props }) => React.createElement('li', { role: 'presentation', 'aria-hidden': 'true', ...props }, children ?? '/');
-export const BreadcrumbEllipsis = (props) => React.createElement('span', { role: 'presentation', 'aria-hidden': 'true', ...props }, '...');
+export const Breadcrumb = ({ children, ...props }: { children?: React.ReactNode; [key: string]: any }) => React.createElement('nav', { 'aria-label': 'breadcrumb', ...props }, children);
+export const BreadcrumbList = ({ children, ...props }: { children?: React.ReactNode; [key: string]: any }) => React.createElement('ol', { className: 'flex flex-wrap items-center gap-1.5 break-words text-sm text-slate-500 dark:text-slate-400', ...props }, children);
+export const BreadcrumbItem = ({ children, ...props }: { children?: React.ReactNode; [key: string]: any }) => React.createElement('li', { className: 'inline-flex items-center gap-1.5', ...props }, children);
+export const BreadcrumbLink = ({ href, children, asChild, ...props }: { href?: string; children?: React.ReactNode; asChild?: boolean; [key: string]: any }) => asChild ? React.createElement('span', props, children) : React.createElement('a', { href, className: 'transition-colors hover:text-slate-900 dark:hover:text-slate-50', ...props }, children);
+export const BreadcrumbPage = ({ children, ...props }: { children?: React.ReactNode; [key: string]: any }) => React.createElement('span', { role: 'link', 'aria-disabled': 'true', 'aria-current': 'page', className: 'font-normal text-slate-900 dark:text-slate-50', ...props }, children);
+export const BreadcrumbSeparator = ({ children, ...props }: { children?: React.ReactNode; [key: string]: any }) => React.createElement('li', { role: 'presentation', 'aria-hidden': 'true', ...props }, children ?? '/');
+export const BreadcrumbEllipsis = (props: { [key: string]: any }) => React.createElement('span', { role: 'presentation', 'aria-hidden': 'true', ...props }, '...');
 
 // Pagination subcomponents for shadcn compatibility
-export const PaginationContent = ({ children, ...props }) => React.createElement('ul', { className: 'flex flex-row items-center gap-1', ...props }, children);
-export const PaginationItem = ({ children, ...props }) => React.createElement('li', props, children);
-export const PaginationLink = ({ href, isActive, children, ...props }) => React.createElement('a', { href, 'aria-current': isActive ? 'page' : undefined, className: `inline-flex items-center justify-center rounded-md text-sm font-medium h-9 min-w-9 px-4 py-2 ${isActive ? 'bg-slate-900 text-white dark:bg-slate-50 dark:text-slate-900' : 'hover:bg-slate-100 dark:hover:bg-slate-800'}`, ...props }, children);
-export const PaginationPrevious = ({ href, ...props }) => React.createElement(PaginationLink, { href, ...props }, 'Previous');
-export const PaginationNext = ({ href, ...props }) => React.createElement(PaginationLink, { href, ...props }, 'Next');
-export const PaginationEllipsis = (props) => React.createElement('span', { 'aria-hidden': true, ...props }, '...');
+export const PaginationContent = ({ children, ...props }: { children?: React.ReactNode; [key: string]: any }) => React.createElement('ul', { className: 'flex flex-row items-center gap-1', ...props }, children);
+export const PaginationItem = ({ children, ...props }: { children?: React.ReactNode; [key: string]: any }) => React.createElement('li', props, children);
+export const PaginationLink = ({ href, isActive, children, ...props }: { href?: string; isActive?: boolean; children?: React.ReactNode; [key: string]: any }) => React.createElement('a', { href, 'aria-current': isActive ? 'page' : undefined, className: `inline-flex items-center justify-center rounded-md text-sm font-medium h-9 min-w-9 px-4 py-2 ${isActive ? 'bg-slate-900 text-white dark:bg-slate-50 dark:text-slate-900' : 'hover:bg-slate-100 dark:hover:bg-slate-800'}`, ...props }, children);
+export const PaginationPrevious = ({ href, ...props }: { href?: string; [key: string]: any }) => React.createElement(PaginationLink, { href, ...props }, 'Previous');
+export const PaginationNext = ({ href, ...props }: { href?: string; [key: string]: any }) => React.createElement(PaginationLink, { href, ...props }, 'Next');
+export const PaginationEllipsis = (props: { [key: string]: any }) => React.createElement('span', { 'aria-hidden': true, ...props }, '...');
 
 // HeroUI wrappers — overlays
 export { default as HeroUIDrawer } from "./heroui/Drawer";

package/src/components/library/skeletons/{CardSkeleton.jsx → CardSkeleton.tsx}

@@ -1,6 +1,9 @@
-import React from "react";
+export interface CardSkeletonProps {
+  lines?: number;
+  className?: string;
+}
 
-export default function CardSkeleton({ lines = 3, className = "" }) {
+export default function CardSkeleton({ lines = 3, className = "" }: CardSkeletonProps) {
   return (
     <div
       className={[
@@ -26,5 +29,3 @@ export default function CardSkeleton({ lines = 3, className = "" }) {
     </div>
   );
 }
-
-

package/src/components/library/theme/{AppThemeProvider.jsx → AppThemeProvider.tsx}

@@ -1,7 +1,15 @@
 import React from "react";
-import { tokens, getTokenCSSProperties } from "./tokens";
+import { tokens, getTokenCSSProperties, Tokens } from "./tokens";
 
-const ThemeModeContext = React.createContext({
+export type ThemeMode = "light" | "dark";
+
+export interface ThemeModeContextValue {
+  mode: ThemeMode;
+  theme: Tokens;
+  toggle: () => void;
+}
+
+const ThemeModeContext = React.createContext<ThemeModeContextValue>({
   mode: "light",
   theme: tokens,
   toggle: () => {}
@@ -9,14 +17,14 @@ const ThemeModeContext = React.createContext({
 
 const STORAGE_KEY = "app-color-mode";
 
-function applyHtmlDarkClass(mode) {
+function applyHtmlDarkClass(mode: ThemeMode): void {
   if (typeof document === "undefined") return;
   const root = document.documentElement;
   if (mode === "dark") root.classList.add("dark");
   else root.classList.remove("dark");
 }
 
-function applyTokenCSSProperties() {
+function applyTokenCSSProperties(): void {
   if (typeof document === "undefined") return;
   const root = document.documentElement;
   const props = getTokenCSSProperties();
@@ -25,12 +33,17 @@ function applyTokenCSSProperties() {
   }
 }
 
-export function useThemeMode() {
+export function useThemeMode(): ThemeModeContextValue {
   return React.useContext(ThemeModeContext);
 }
 
-export default function AppThemeProvider({ initialMode = "light", children }) {
-  const [mode, setMode] = React.useState(initialMode);
+export interface AppThemeProviderProps {
+  initialMode?: ThemeMode;
+  children: React.ReactNode;
+}
+
+export default function AppThemeProvider({ initialMode = "light", children }: AppThemeProviderProps) {
+  const [mode, setMode] = React.useState<ThemeMode>(initialMode);
 
   React.useEffect(() => {
     applyTokenCSSProperties();

package/src/components/library/theme/{tokens.jsx → tokens.tsx}

@@ -10,7 +10,41 @@
  * and tailwind.config.js references them via var(--color-brand-*).
  */
 
-export const tokens = {
+export interface ColorShades {
+  50: string;
+  100: string;
+  200: string;
+  300: string;
+  400: string;
+  500: string;
+  600: string;
+  700: string;
+  800: string;
+  900: string;
+  950: string;
+}
+
+export interface Tokens {
+  colors: {
+    brand: ColorShades;
+    accent: ColorShades;
+  };
+  fonts: {
+    sans: string;
+    mono: string;
+  };
+  radius: {
+    sm: string;
+    md: string;
+    lg: string;
+  };
+  spacing: {
+    pageX: string;
+    pageY: string;
+  };
+}
+
+export const tokens: Tokens = {
   colors: {
     brand: {
       50: "#EEF2FF",
@@ -61,8 +95,8 @@ export const tokens = {
  * Generates CSS custom property assignments from the token palettes.
  * Used by AppThemeProvider to inject on :root at runtime.
  */
-export function getTokenCSSProperties() {
-  const props = {};
+export function getTokenCSSProperties(): Record<string, string> {
+  const props: Record<string, string> = {};
   for (const [palette, shades] of Object.entries(tokens.colors)) {
     for (const [shade, value] of Object.entries(shades)) {
       props[`--color-${palette}-${shade}`] = value;

package/src/components/workspace/{ComponentRegistry.jsx → ComponentRegistry.tsx}

@@ -1,20 +1,125 @@
-import React from "react";
+import * as React from "react";
 import {
-  BaseCard,
   MetricCard,
   TableCard,
   ChartCard,
   D3Chart,
   D3ChartTemplates,
   StatusCard,
-  ListCard,
   UIButton,
-  UIChip,
-  UIText
+  UIChip
 } from "@/components/library";
 
+export interface Metric {
+  label: string;
+  value: string | number;
+  trend?: string | number | null;
+}
+
+export interface MetricsStripProps {
+  metrics?: Metric[];
+  title?: string;
+  collapsible?: boolean;
+  collapsed?: boolean;
+}
+
+export interface ListItem {
+  id?: string;
+  title?: string;
+  name?: string;
+  description?: string;
+  status?: "critical" | "warning" | string;
+  actions?: Array<string | { label: string }>;
+}
+
+export interface ItemListProps {
+  items?: ListItem[];
+  title?: string;
+  onItemClick?: (item: ListItem) => void;
+}
+
+export interface TableColumn {
+  key: string;
+  label: string;
+}
+
+export interface DataTableProps {
+  title?: string;
+  subtitle?: string;
+  columns?: TableColumn[];
+  data?: any[];
+  rows?: any[];
+  searchable?: boolean;
+  sortable?: boolean;
+  paginated?: boolean;
+  pageSize?: number;
+}
+
+export interface DataPoint {
+  x: number;
+  y: number;
+  [key: string]: any;
+}
+
+export interface DataChartProps {
+  title?: string;
+  subtitle?: string;
+  chartType?: string;
+  data?: DataPoint[];
+  height?: number;
+}
+
+export interface MetricCardComponentProps {
+  title?: string;
+  label?: string;
+  value?: string | number;
+  trend?: string | number;
+  change?: string | number;
+  changeType?: string;
+  color?: string;
+  icon?: React.ReactNode;
+  description?: string;
+}
+
+export interface StatusCardComponentProps {
+  title?: string;
+  subtitle?: string;
+  status?: string;
+  items?: any[];
+  layout?: string;
+  showProgress?: boolean;
+  showTimestamp?: boolean;
+}
+
+export interface ActionListProps {
+  actions?: Array<string | { label: string }>;
+  title?: string;
+  onAction?: (action: string | { label: string }) => void;
+}
+
+export interface CalloutCardProps {
+  title?: string;
+  message?: string;
+  tone?: "neutral" | "success" | "warning" | "danger";
+}
+
+export interface SpacerProps {
+  size?: "sm" | "md" | "lg";
+}
+
+export interface NarrativeSummaryProps {
+  summary?: string;
+  title?: string;
+}
+
+export interface SchemaComponent {
+  id?: string;
+  type: string;
+  props?: Record<string, any>;
+}
+
 const BUILTIN_COMPONENTS = {
-  NarrativeSummary({ summary, title }) {
+  NarrativeSummary({ summary, title }: NarrativeSummaryProps) {
     return (
       <div className="text-sm text-slate-600 dark:text-slate-300">
         {title && <div className="mb-1 font-medium text-slate-900 dark:text-slate-50">{title}</div>}
@@ -23,7 +128,7 @@ const BUILTIN_COMPONENTS = {
     );
   },
 
-  MetricsStrip({ metrics = [], title, collapsible = false, collapsed: initialCollapsed = false }) {
+  MetricsStrip({ metrics = [], title, collapsible = false, collapsed: initialCollapsed = false }: MetricsStripProps) {
     const [collapsed, setCollapsed] = React.useState(initialCollapsed);
 
     const items = metrics.length ? metrics : [
@@ -68,7 +173,7 @@ const BUILTIN_COMPONENTS = {
               <div className="flex items-baseline gap-1.5">
                 <span className="text-sm font-semibold text-slate-700 dark:text-slate-200">{m.value}</span>
                 {m.trend && (
-                  <span className={`text-xs ${String(m.trend).startsWith?.("+") || m.trend > 0 ? "text-red-500" : "text-emerald-500"}`}>
+                  <span className={`text-xs ${String(m.trend).startsWith?.("+") || (typeof m.trend === "number" && m.trend > 0) ? "text-red-500" : "text-emerald-500"}`}>
                     {typeof m.trend === "number" ? (m.trend > 0 ? `+${m.trend}` : m.trend) : m.trend}
                   </span>
                 )}
@@ -80,8 +185,8 @@ const BUILTIN_COMPONENTS = {
     );
   },
 
-  ItemList({ items = [], title, onItemClick }) {
-    const [expanded, setExpanded] = React.useState(null);
+  ItemList({ items = [], title, onItemClick }: ItemListProps) {
+    const [expanded, setExpanded] = React.useState<string | number | null>(null);
     if (!items.length) {
       return <div className="text-sm text-slate-500 dark:text-slate-400">No items.</div>;
     }
@@ -146,7 +251,7 @@ const BUILTIN_COMPONENTS = {
     );
   },
 
-  DataTable({ title, subtitle, columns = [], data = [], rows, searchable = true, sortable = true, paginated = true, pageSize = 5 }) {
+  DataTable({ title, subtitle, columns = [], data = [], rows, searchable = true, sortable = true, paginated = true, pageSize = 5 }: DataTableProps) {
     const tableData = data.length ? data : (rows ?? []);
     const cols = columns.length ? columns : [
       { key: "name", label: "Name" },
@@ -167,7 +272,7 @@ const BUILTIN_COMPONENTS = {
     );
   },
 
-  DataChart({ title, subtitle, chartType = "line", data = [], height = 200 }) {
+  DataChart({ title, subtitle, chartType = "line", data = [], height = 200 }: DataChartProps) {
     const series = data.length ? data : Array.from({ length: 12 }, (_, i) => ({ x: i, y: Math.random() * 100 }));
     return (
       <ChartCard
@@ -177,11 +282,11 @@ const BUILTIN_COMPONENTS = {
         height={height}
         chart={
           <D3Chart
-            data={series}
+            data={series as any}
             responsive
             height={height}
             ariaLabel={title}
-            renderChart={(svg, d, dims, opts) => D3ChartTemplates.lineChart(svg, d, dims, opts)}
+            renderChart={(svg, d, dims, opts) => D3ChartTemplates.lineChart(svg, d as any, dims, opts)}
             options={{ xKey: "x", yKey: "y", showGrid: true, showAxes: true }}
           />
         }
@@ -189,36 +294,36 @@ const BUILTIN_COMPONENTS = {
     );
   },
 
-  MetricCard({ title, label, value, trend, change, changeType, color, icon, description }) {
+  MetricCard({ title, label, value, trend, change, changeType, color, icon, description }: MetricCardComponentProps) {
     return (
       <MetricCard
-        title={title ?? label}
+        title={(title ?? label) as any}
         value={value ?? "—"}
-        trend={trend}
-        change={change}
-        changeType={changeType}
-        color={color}
+        trend={trend as any}
+        change={change as any}
+        changeType={changeType as any}
+        color={color as any}
         icon={icon}
-        description={description}
+        subtitle={description}
       />
     );
   },
 
-  StatusCard({ title, subtitle, status, items, layout, showProgress, showTimestamp }) {
+  StatusCard({ title, subtitle, status, items, layout, showProgress, showTimestamp }: StatusCardComponentProps) {
     return (
       <StatusCard
         title={title}
         subtitle={subtitle}
         status={status}
         items={items}
-        layout={layout}
+        layout={layout as any}
         showProgress={showProgress}
         showTimestamp={showTimestamp}
       />
     );
   },
 
-  ActionList({ actions = [], title, onAction }) {
+  ActionList({ actions = [], title, onAction }: ActionListProps) {
     return (
       <div className="rounded-2xl border border-slate-200 bg-white p-4 dark:border-slate-800 dark:bg-slate-900">
         {title && <div className="mb-3 text-sm font-medium text-slate-900 dark:text-slate-50">{title}</div>}
@@ -238,7 +343,7 @@ const BUILTIN_COMPONENTS = {
     );
   },
 
-  CalloutCard({ title, message, tone = "neutral" }) {
+  CalloutCard({ title, message, tone = "neutral" }: CalloutCardProps) {
     const toneClasses = {
       neutral: "border-slate-200 bg-slate-50 text-slate-700 dark:border-slate-800 dark:bg-slate-950/30 dark:text-slate-200",
       success: "border-emerald-200 bg-emerald-50 text-emerald-800 dark:border-emerald-900/40 dark:bg-emerald-950/20 dark:text-emerald-200",
@@ -257,27 +362,27 @@ const BUILTIN_COMPONENTS = {
     return <div className="h-px bg-slate-200 dark:bg-slate-800" />;
   },
 
-  Spacer({ size = "md" }) {
+  Spacer({ size = "md" }: SpacerProps) {
     const heights = { sm: "h-2", md: "h-4", lg: "h-6" };
     return <div className={heights[size] ?? heights.md} />;
   }
 };
 
-let _registry = { ...BUILTIN_COMPONENTS };
+let _registry: Record<string, React.ComponentType<any>> = { ...BUILTIN_COMPONENTS };
 
-export function getComponentRegistry() {
+export function getComponentRegistry(): Record<string, React.ComponentType<any>> {
   return _registry;
 }
 
-export function registerComponent(type, Component) {
+export function registerComponent(type: string, Component: React.ComponentType<any>): void {
   _registry = { ..._registry, [type]: Component };
 }
 
-export function registerComponents(map) {
+export function registerComponents(map: Record<string, React.ComponentType<any>>): void {
   _registry = { ..._registry, ...map };
 }
 
-export function renderSchemaComponent(component, index) {
+export function renderSchemaComponent(component: SchemaComponent, index: number): React.ReactElement {
   const registry = getComponentRegistry();
   const Component = registry[component.type];
   if (!Component) {
@@ -290,7 +395,7 @@ export function renderSchemaComponent(component, index) {
   return <Component key={component.id ?? index} {...(component.props ?? {})} />;
 }
 
-export function renderSchema(components = []) {
+export function renderSchema(components: SchemaComponent[] = []): React.ReactElement[] {
   return components.map((c, i) => renderSchemaComponent(c, i));
 }
 

package/src/components/library/chat/index.jsx

@@ -1,10 +0,0 @@
-export { default as ChatPanel } from "./ChatPanel";
-export { default as ChatBar } from "./ChatBar";
-export { default as ChatMessageList } from "./ChatMessageList";
-export { default as ChatMessage } from "./ChatMessage";
-export { default as ChatInput } from "./ChatInput";
-export { default as ChatTypingIndicator } from "./ChatTypingIndicator";
-export { default as ChatSuggestions } from "./ChatSuggestions";
-export { default as ChatToolCall } from "./ChatToolCall";
-export { default as ChatWelcome } from "./ChatWelcome";
-export { default as useChatState } from "./useChatState";