Merge pull request #42 from objectstack-ai/copilot/optimize-designer-drag-functionality

Author: huangyiirene

packages/components/src/renderers/complex/calendar-view.tsx

@@ -7,7 +7,7 @@ import React from 'react';
 ComponentRegistry.register('calendar-view', 
   ({ schema, className, onAction, ...props }: { schema: CalendarViewSchema; className?: string; onAction?: (action: any) => void; [key: string]: any }) => {
     // Transform schema data to CalendarEvent format
-    const events: CalendarEvent[] = React.useMemo(() => {
+    const events = React.useMemo(() => {
       if (!schema.data || !Array.isArray(schema.data)) return [];
 
       return schema.data.map((record: any, index: number) => {
@@ -34,7 +34,7 @@ ComponentRegistry.register('calendar-view',
         }
 
         return {
-          id: record.id || record._id || index,
+          id: String(record.id || record._id || index),
           title,
           start,
           end,
@@ -45,7 +45,7 @@ ComponentRegistry.register('calendar-view',
       });
     }, [schema.data, schema.titleField, schema.startDateField, schema.endDateField, schema.colorField, schema.allDayField, schema.colorMapping]);
 
-    const handleEventClick = React.useCallback((event: CalendarEvent) => {
+    const handleEventClick = React.useCallback((event: any) => {
       if (onAction) {
         onAction({
           type: 'event_click',
@@ -95,8 +95,8 @@ ComponentRegistry.register('calendar-view',
 
     return (
       <CalendarView
-        events={events}
-        view={schema.view || 'month'}
+        events={events as any[]}
+        view={(schema.view as any) || 'month'}
         currentDate={schema.currentDate ? new Date(schema.currentDate) : undefined}
         onEventClick={handleEventClick}
         onDateClick={schema.allowCreate || schema.onDateClick ? handleDateClick : undefined}

packages/components/src/renderers/complex/chatbot.tsx

@@ -19,11 +19,11 @@ ComponentRegistry.register('chatbot',
   ({ schema, className, ...props }) => {
     // Initialize messages from schema or use empty array
     const [messages, setMessages] = useState<ChatMessage[]>(
-      schema.messages?.map((msg: Partial<ChatMessage>, idx: number) => ({
+      schema.messages?.map((msg: any, idx: number) => ({
         id: msg.id || `msg-${idx}`,
         role: msg.role || 'user',
         content: msg.content || '',
-        timestamp: msg.timestamp,
+        timestamp: typeof msg.timestamp === 'string' ? msg.timestamp : (msg.timestamp instanceof Date ? msg.timestamp.toISOString() : undefined),
         avatar: msg.avatar,
         avatarFallback: msg.avatarFallback,
       })) || []
@@ -63,7 +63,7 @@ ComponentRegistry.register('chatbot',
 
     return (
       <Chatbot 
-        messages={messages}
+        messages={messages as any}
         placeholder={schema.placeholder}
         onSendMessage={handleSendMessage}
         disabled={schema.disabled}

packages/components/src/renderers/complex/filter-builder.tsx

@@ -4,7 +4,7 @@ import { FilterBuilder } from '@/ui/filter-builder';
 
 ComponentRegistry.register('filter-builder', 
   ({ schema, className, onChange, ...props }: { schema: FilterBuilderSchema; className?: string; onChange?: (event: any) => void; [key: string]: any }) => {
-    const handleChange = (value: FilterGroup) => {
+    const handleChange = (value: any) => {
       if (onChange) {
         onChange({
           target: {
@@ -21,7 +21,7 @@ ComponentRegistry.register('filter-builder',
           <label className="text-sm font-medium mb-2 block">{schema.label}</label>
         )}
         <FilterBuilder
-          fields={schema.fields || []}
+          fields={(schema.fields || []) as any}
           value={schema.value || props.value}
           onChange={handleChange}
           className={className}

packages/components/src/renderers/feedback/loading.tsx

@@ -15,7 +15,7 @@ ComponentRegistry.register('loading',
             size === 'sm' && 'h-4 w-4',
             size === 'md' && 'h-8 w-8',
             size === 'lg' && 'h-12 w-12',
-            size === 'xl' && 'h-16 w-16'
+            size === ('xl' as any) && 'h-16 w-16'
           )}
         />
         {schema.text && (

packages/components/src/renderers/form/calendar.tsx

@@ -5,8 +5,8 @@ import { Calendar } from '@/ui';
 ComponentRegistry.register('calendar', 
   ({ schema, className, ...props }: { schema: CalendarSchema; className?: string; [key: string]: any }) => (
     <Calendar
-      mode={schema.mode || "single"}
-      selected={schema.value || schema.defaultValue}
+      mode={(schema.mode || "single") as any}
+      selected={(schema.value || schema.defaultValue) as any}
       className={className}
       {...props}
     />

packages/components/src/renderers/form/form.tsx

@@ -71,7 +71,7 @@ ComponentRegistry.register('form',
             type: 'form_submit',
             data,
             formData: data,
-          });
+          }) as any;
 
           // Check if submission returned an error
           if (result?.error) {
@@ -97,7 +97,7 @@ ComponentRegistry.register('form',
         setSubmitError(errorMessage);
 
         // Log errors for debugging (dev environment only)
-        // @ts-expect-error - process may not be defined in all environments
+        // process may not be defined in all environments
         if (typeof process !== 'undefined' && process.env?.NODE_ENV === 'development') {
           console.error('Form submission error:', error);
         }

packages/components/src/renderers/layout/container.tsx

@@ -5,7 +5,7 @@ import { cn } from '@/lib/utils';
 
 ComponentRegistry.register('container', 
   ({ schema, className, ...props }: { schema: ContainerSchema; className?: string; [key: string]: any }) => {
-    const maxWidth = schema.maxWidth || 'xl';
+    const maxWidth = (schema.maxWidth || 'xl') as any;
     const padding = schema.padding || 4;
     const centered = schema.centered !== false; // Default to true
 

packages/components/src/renderers/layout/tabs.tsx

@@ -18,7 +18,7 @@ ComponentRegistry.register('tabs',
       </TabsList>
       {schema.items?.map((item) => (
         <TabsContent key={item.value} value={item.value}>
-          {renderChildren(item.body)}
+          {renderChildren((item as any).body)}
         </TabsContent>
       ))}
     </Tabs>

packages/components/src/renderers/overlay/tooltip.tsx

@@ -20,7 +20,7 @@ ComponentRegistry.register('tooltip',
           {renderChildren(schema.trigger)}
         </TooltipTrigger>
         <TooltipContent side={schema.side} align={schema.align} className={className}>
-           {schema.content || renderChildren(schema.body)}
+           {(schema.content || renderChildren(schema.body)) as any}
         </TooltipContent>
       </Tooltip>
     </TooltipProvider>

packages/components/src/ui/chatbot.tsx

@@ -97,7 +97,7 @@ const Chatbot = React.forwardRef<HTMLDivElement, ChatbotProps>(
               </div>
             ) : (
               messages.map((message) => (
-                <ChatMessage
+                <ChatMessageItem
                   key={message.id}
                   message={message}
                   showTimestamp={showTimestamp}
@@ -148,7 +148,7 @@ export interface ChatMessageProps {
   assistantAvatarFallback?: string
 }
 
-const ChatMessage: React.FC<ChatMessageProps> = ({
+const ChatMessageItem: React.FC<ChatMessageProps> = ({
   message,
   showTimestamp,
   userAvatarUrl,
@@ -238,4 +238,3 @@ const TypingIndicator = React.forwardRef<HTMLDivElement, TypingIndicatorProps>(
 TypingIndicator.displayName = "TypingIndicator"
 
 export { Chatbot, TypingIndicator }
-export type { ChatMessage }