ai-design-system 0.1.40 → 0.1.42

package/components/blocks/AIConversation/AIConversation.tsx

@@ -6,12 +6,11 @@ import {
   ConversationScrollButton,
   type ConversationProps,
 } from "@/components/ai-elements/conversation"
-import { type AIMessage } from "@/components/composites/AgentMessage"
+import type { ToolCall, SubAgent } from "@/components/composites"
 import { UserMessage } from "@/components/composites/UserMessage"
 import { SpecialistMessage } from "@/components/composites/SpecialistMessage"
 import { OrchestratorMessage } from "@/components/composites/OrchestratorMessage"
 import { ToolCallDisplay } from "@/components/composites/ToolCallDisplay"
-import type { SubAgent } from "@/components/composites/AgentIndicator"
 
 /**
  * AIConversation Section
@@ -23,6 +22,17 @@ import type { SubAgent } from "@/components/composites/AgentIndicator"
  * Based on reference implementation from deep-agents-ui ChatInterface.
  */
 
+interface AIMessage {
+  id: string;
+  type: 'human' | 'ai';
+  role: string;
+  content: string;
+  avatarSrc?: string;
+  avatarName?: string;
+  toolCalls?: ToolCall[];
+  subAgents?: SubAgent[];
+}
+
 export interface AIConversationProps
   extends Omit<ConversationProps, "children"> {
   /**

package/components/blocks/WorkflowCanvas/WorkflowCanvas.tsx

@@ -97,7 +97,7 @@ function WorkflowCanvasInner({
         connectionMode={ConnectionMode.Strict}
         edges={edges}
         edgeTypes={edgeTypes}
-        elementsSelectable={interactive}
+        elementsSelectable={true}
         isValidConnection={isValidConnection}
         nodes={nodes}
         nodeTypes={nodeTypes}
@@ -106,8 +106,8 @@ function WorkflowCanvasInner({
         onConnect={interactive ? onConnect : undefined}
         onConnectEnd={interactive ? onConnectEnd : undefined}
         onConnectStart={interactive ? onConnectStart : undefined}
-        onEdgesChange={interactive ? onEdgesChange : undefined}
-        onNodesChange={interactive ? onNodesChange : undefined}
+        onEdgesChange={onEdgesChange}
+        onNodesChange={onNodesChange}
         onPaneClick={onPaneClick}
         onNodeClick={onNodeClick}
         onEdgeClick={onEdgeClick}

package/components/composites/FilePreviewDialog/FilePreviewDialog.tsx

@@ -13,6 +13,7 @@ interface ChecklistItem {
   id: string;
   label: string;
   checked: boolean;
+  isTask: boolean;
 }
 
 function parseChecklistItems(content?: string) {
@@ -50,6 +51,7 @@ function parseChecklistItems(content?: string) {
           id: `checklist-${index}`,
           label: taskMatch[2],
           checked: taskMatch[1].toLowerCase() === "x",
+          isTask: true,
         });
         return items;
       }
@@ -61,6 +63,7 @@ function parseChecklistItems(content?: string) {
         id: `checklist-${index}`,
         label: numberStripped,
         checked: false,
+        isTask: false,
       });
 
       return items;
@@ -121,16 +124,18 @@ export const FilePreviewDialog = React.memo<FilePreviewDialogProps>(
                     key={item.id}
                     className="flex items-start gap-3 rounded-md px-1 py-1 text-sm leading-6"
                   >
-                    <Checkbox
-                      checked={checkedItems[item.id] ?? false}
-                      onCheckedChange={(checked) => {
-                        setCheckedItems((prev) => ({
-                          ...prev,
-                          [item.id]: checked === true,
-                        }));
-                      }}
-                      className="mt-1"
-                    />
+                    {item.isTask && (
+                      <Checkbox
+                        checked={checkedItems[item.id] ?? false}
+                        onCheckedChange={(checked) => {
+                          setCheckedItems((prev) => ({
+                            ...prev,
+                            [item.id]: checked === true,
+                          }));
+                        }}
+                        className="mt-1"
+                      />
+                    )}
                     <span>{item.label}</span>
                   </label>
                 ))}

package/components/composites/FileQueue/FileQueue.tsx

@@ -102,7 +102,11 @@ export const FileQueue = React.memo<FileQueueProps>(
                           aria-selected={isClickable ? isSelected : undefined}
                         >
                           <div className="flex items-start gap-2">
-                            <Icon name="file" size="sm" className="mt-0.5" />
+                            <Icon 
+                              name={file.icon || "file"} 
+                              size="sm" 
+                              className={cn("mt-0.5", file.iconColor)} 
+                            />
                             <QueueItemContent>
                               {file.name}
                               {file.path && (

package/components/composites/FileQueue/interfaces.ts

@@ -4,6 +4,8 @@ export interface FileItem {
   id: string;
   name: string;
   path?: string;
+  icon?: string;
+  iconColor?: string;
 }
 
 export interface FileGroup {

package/dist/index.cjs

@@ -1010,6 +1010,32 @@ var defaultIcons = {
     name: "server",
     viewBox: "0 0 24 24",
     path: "M20 8V6a2 2 0 00-2-2H6a2 2 0 00-2 2v2M4 18v2a2 2 0 002 2h12a2 2 0 002-2v-2M4 12h16M4 12v2a2 2 0 002 2h12a2 2 0 002-2v-2M8 6h.01M16 6h.01M8 18h.01M16 18h.01"
+  },
+  // Plugin specific icons
+  "bot": {
+    name: "bot",
+    viewBox: "0 0 24 24",
+    path: "M12 8V4H8 M2 14h2 M20 14h2 M15 13v2 M9 13v2 M4 8h16v12H4z"
+  },
+  "github": {
+    name: "github",
+    viewBox: "0 0 24 24",
+    path: "M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0020 4.77 5.07 5.07 0 0019.91 1S18.73.65 16 2.48a13.38 13.38 0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 005 4.77a5.44 5.44 0 00-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 009 18.13V22"
+  },
+  "credit-card": {
+    name: "credit-card",
+    viewBox: "0 0 24 24",
+    path: "M21 4H3a2 2 0 00-2 2v12a2 2 0 002 2h18a2 2 0 002-2V6a2 2 0 00-2-2zM1 10h22"
+  },
+  "video": {
+    name: "video",
+    viewBox: "0 0 24 24",
+    path: "M23 7l-7 5 7 5V7z M1 5h15v14H1z"
+  },
+  "globe": {
+    name: "globe",
+    viewBox: "0 0 24 24",
+    path: "M12 22a10 10 0 100-20 10 10 0 000 20z M2 12h20 M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z"
   }
 };
 var IconRegistry = class {
@@ -2984,7 +3010,14 @@ var FileQueue = React3__namespace.memo(
               onKeyDown: (e) => handleKeyDown(e, file.id),
               "aria-selected": isClickable ? isSelected : void 0,
               children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "file", size: "sm", className: "mt-0.5" }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  Icon,
+                  {
+                    name: file.icon || "file",
+                    size: "sm",
+                    className: cn("mt-0.5", file.iconColor)
+                  }
+                ),
                 /* @__PURE__ */ jsxRuntime.jsxs(QueueItemContent, { children: [
                   file.name,
                   file.path && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-muted-foreground/70", children: [
@@ -4576,7 +4609,8 @@ function parseChecklistItems(content) {
       items.push({
         id: `checklist-${index}`,
         label: taskMatch[2],
-        checked: taskMatch[1].toLowerCase() === "x"
+        checked: taskMatch[1].toLowerCase() === "x",
+        isTask: true
       });
       return items;
     }
@@ -4585,7 +4619,8 @@ function parseChecklistItems(content) {
     items.push({
       id: `checklist-${index}`,
       label: numberStripped,
-      checked: false
+      checked: false,
+      isTask: false
     });
     return items;
   }, []);
@@ -4628,7 +4663,7 @@ var FilePreviewDialog = React3__namespace.memo(
               {
                 className: "flex items-start gap-3 rounded-md px-1 py-1 text-sm leading-6",
                 children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
+                  item.isTask && /* @__PURE__ */ jsxRuntime.jsx(
                     Checkbox2,
                     {
                       checked: (_a = checkedItems[item.id]) != null ? _a : false,
@@ -9438,7 +9473,7 @@ function WorkflowCanvasInner({
           connectionMode: react.ConnectionMode.Strict,
           edges,
           edgeTypes,
-          elementsSelectable: interactive,
+          elementsSelectable: true,
           isValidConnection,
           nodes,
           nodeTypes,
@@ -9447,8 +9482,8 @@ function WorkflowCanvasInner({
           onConnect: interactive ? onConnect : void 0,
           onConnectEnd: interactive ? onConnectEnd : void 0,
           onConnectStart: interactive ? onConnectStart : void 0,
-          onEdgesChange: interactive ? onEdgesChange : void 0,
-          onNodesChange: interactive ? onNodesChange : void 0,
+          onEdgesChange,
+          onNodesChange,
           onPaneClick,
           onNodeClick,
           onEdgeClick,