@admin-layout/tailwind-ui 12.2.4-alpha.33 → 12.2.4-alpha.35

package/lib/components/InputToolBar/InputToolBar.js

@@ -1,25 +1,25 @@
-import {Lightbulb,Zap,Search,Mic,Paperclip,Image,Camera,WandSparkles,Settings,X,Layout,Check,StopCircle,ArrowUpRight}from'lucide-react';import React__default,{useState,useMemo}from'react';import'../../utils/isBrowser/index.js';import {cn}from'../../utils/util.js';import'fast-deep-equal/react.js';const iconSize = 'h-3.5 w-3.5';
+import {jsx,jsxs,Fragment}from'react/jsx-runtime';import {Lightbulb,Zap,Search,Mic,Paperclip,Image,Camera,WandSparkles,Settings,X,Layout,Check,StopCircle,ArrowUpRight}from'lucide-react';import React__default,{useState,useMemo}from'react';import'../../utils/isBrowser/index.js';import {cn}from'../../utils/util.js';import'fast-deep-equal/react.js';const iconSize = 'h-3.5 w-3.5';
 const iconSizeRight = 'h-4 w-4';
 const defaultLeftIconMap = {
-  search: React__default.createElement(Search, {
+  search: jsx(Search, {
     className: iconSize
   }),
-  zap: React__default.createElement(Zap, {
+  zap: jsx(Zap, {
     className: iconSize
   }),
-  lightbulb: React__default.createElement(Lightbulb, {
+  lightbulb: jsx(Lightbulb, {
     className: iconSize
   }),
   template: null // template is rendered as pill, not in icon group
 };
 const defaultRightIconMap = {
-  projectSettings: React__default.createElement(Settings, {
+  projectSettings: jsx(Settings, {
     className: iconSizeRight
   }),
-  tag: React__default.createElement(WandSparkles, {
+  tag: jsx(WandSparkles, {
     className: iconSizeRight
   }),
-  chip: React__default.createElement("svg", {
+  chip: jsxs("svg", {
     className: iconSizeRight,
     viewBox: "0 0 24 24",
     fill: "none",
@@ -27,45 +27,46 @@ const defaultRightIconMap = {
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    "aria-hidden": true
-  }, React__default.createElement("rect", {
-    x: "4",
-    y: "4",
-    width: "16",
-    height: "16",
-    rx: "2",
-    ry: "2"
-  }), React__default.createElement("line", {
-    x1: "9",
-    y1: "9",
-    x2: "15",
-    y2: "9"
-  }), React__default.createElement("line", {
-    x1: "9",
-    y1: "15",
-    x2: "15",
-    y2: "15"
-  }), React__default.createElement("line", {
-    x1: "9",
-    y1: "9",
-    x2: "9",
-    y2: "15"
-  }), React__default.createElement("line", {
-    x1: "15",
-    y1: "9",
-    x2: "15",
-    y2: "15"
-  })),
-  camera: React__default.createElement(Camera, {
+    "aria-hidden": true,
+    children: [jsx("rect", {
+      x: "4",
+      y: "4",
+      width: "16",
+      height: "16",
+      rx: "2",
+      ry: "2"
+    }), jsx("line", {
+      x1: "9",
+      y1: "9",
+      x2: "15",
+      y2: "9"
+    }), jsx("line", {
+      x1: "9",
+      y1: "15",
+      x2: "15",
+      y2: "15"
+    }), jsx("line", {
+      x1: "9",
+      y1: "9",
+      x2: "9",
+      y2: "15"
+    }), jsx("line", {
+      x1: "15",
+      y1: "9",
+      x2: "15",
+      y2: "15"
+    })]
+  }),
+  camera: jsx(Camera, {
     className: iconSizeRight
   }),
-  image: React__default.createElement(Image, {
+  image: jsx(Image, {
     className: iconSizeRight
   }),
-  attach: React__default.createElement(Paperclip, {
+  attach: jsx(Paperclip, {
     className: iconSizeRight
   }),
-  mic: React__default.createElement(Mic, {
+  mic: jsx(Mic, {
     className: iconSizeRight
   })
 };
@@ -83,20 +84,21 @@ function MicSendButton({
   const base = 'inline-flex h-7 w-7 items-center justify-center rounded-2xl transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none bg-primary text-primary-foreground hover:bg-primary/90 active:bg-primary border border-primary';
   const handleClick = isStop ? onStop : isSend ? onSend : onMic;
   const label = isStop ? 'Stop' : isSend ? 'Send' : 'Start voice input';
-  return React__default.createElement("button", {
+  return jsx("button", {
     type: "button",
     "aria-label": label,
     title: label,
     onClick: handleClick,
     disabled: disabled && !isStop,
-    className: cn(base, className)
-  }, isStop ? React__default.createElement(StopCircle, {
-    className: iconSizeRight
-  }) : isSend ? React__default.createElement(ArrowUpRight, {
-    className: iconSizeRight
-  }) : React__default.createElement(Mic, {
-    className: iconSizeRight
-  }));
+    className: cn(base, className),
+    children: isStop ? jsx(StopCircle, {
+      className: iconSizeRight
+    }) : isSend ? jsx(ArrowUpRight, {
+      className: iconSizeRight
+    }) : jsx(Mic, {
+      className: iconSizeRight
+    })
+  });
 }
 function ToolbarIconButton({
   item,
@@ -107,7 +109,9 @@ function ToolbarIconButton({
   if (item.enabled === false) return null;
   const icon = item.customButton ?? item.icon ?? getDefaultIcon(item.id);
   if (item.customButton) {
-    return React__default.createElement(React__default.Fragment, null, item.customButton);
+    return jsx(Fragment, {
+      children: item.customButton
+    });
   }
   const isDisabled = item.disabled === true || item.loading === true;
   const isActive = item.active === true;
@@ -117,17 +121,18 @@ function ToolbarIconButton({
   const rightVariantActive = cn('rounded-2xl text-primary hover:bg-secondary border border-transparent', classNames?.rightButtonActive);
   const rightVariantDefault = cn('rounded-2xl text-muted-foreground hover:bg-secondary/70 active:bg-secondary border border-transparent', classNames?.rightButton);
   const rightVariant = isDisabled ? rightVariantDisabled : isActive ? rightVariantActive : rightVariantDefault;
-  return React__default.createElement("button", {
+  return jsx("button", {
     type: "button",
     "aria-label": item.label,
     title: item.label,
     onClick: item.onClick,
     disabled: isDisabled,
-    className: cn(base, isLeftGroup ? leftVariant : rightVariant)
-  }, item.loading ? React__default.createElement("div", {
-    className: "h-4 w-4 animate-spin rounded-full border-2 border-primary border-t-transparent",
-    "aria-hidden": true
-  }) : icon);
+    className: cn(base, isLeftGroup ? leftVariant : rightVariant),
+    children: item.loading ? jsx("div", {
+      className: "h-4 w-4 animate-spin rounded-full border-2 border-primary border-t-transparent",
+      "aria-hidden": true
+    }) : icon
+  });
 }
 function LeftSection({
   leftItems,
@@ -136,38 +141,41 @@ function LeftSection({
   classNames
 }) {
   if (leftCustomRender != null) {
-    return React__default.createElement("div", {
-      className: cn('flex items-center gap-2', classNames?.leftGroup)
-    }, leftCustomRender);
+    return jsx("div", {
+      className: cn('flex items-center gap-2', classNames?.leftGroup),
+      children: leftCustomRender
+    });
   }
   const left = leftItems ?? [];
   const leftEnabled = left.filter(item => item.enabled !== false);
   const hasTemplate = templateButton != null;
   const hasLeft = leftEnabled.length > 0 || hasTemplate;
   if (!hasLeft) return null;
-  return React__default.createElement("div", {
-    className: cn('flex items-center gap-2', classNames?.leftGroup)
-  }, leftEnabled.length > 0 && React__default.createElement("div", {
-    className: "flex items-center gap-1 rounded-full bg-secondary px-2 py-1"
-  }, leftEnabled.map((item, index) => React__default.createElement(React__default.Fragment, {
-    key: item.id
-  }, React__default.createElement(ToolbarIconButton, {
-    item: item,
-    getDefaultIcon: id => defaultLeftIconMap[id] ?? null,
-    isLeftGroup: true,
-    classNames: classNames
-  }), index < leftEnabled.length - 1 && React__default.createElement("span", {
-    "aria-hidden": "true",
-    className: "mx-1 h-5 w-px bg-border/70"
-  })))), hasTemplate && React__default.createElement(TemplatePill, {
-    label: templateButton.label,
-    count: templateButton.count,
-    selectedLabel: templateButton.selectedLabel,
-    onClick: templateButton.onClick,
-    onClearTemplate: templateButton.onClearTemplate,
-    disabled: templateButton.disabled,
-    classNames: classNames
-  }));
+  return jsxs("div", {
+    className: cn('flex items-center gap-2', classNames?.leftGroup),
+    children: [leftEnabled.length > 0 && jsx("div", {
+      className: "flex items-center gap-1 rounded-full bg-secondary px-2 py-1",
+      children: leftEnabled.map((item, index) => jsxs(React__default.Fragment, {
+        children: [jsx(ToolbarIconButton, {
+          item: item,
+          getDefaultIcon: id => defaultLeftIconMap[id] ?? null,
+          isLeftGroup: true,
+          classNames: classNames
+        }), index < leftEnabled.length - 1 && jsx("span", {
+          "aria-hidden": "true",
+          className: "mx-1 h-5 w-px bg-border/70"
+        })]
+      }, item.id))
+    }), hasTemplate && jsx(TemplatePill, {
+      label: templateButton.label,
+      count: templateButton.count,
+      selectedLabel: templateButton.selectedLabel,
+      onClick: templateButton.onClick,
+      onClearTemplate: templateButton.onClearTemplate,
+      disabled: templateButton.disabled,
+      classNames: classNames
+    })]
+  });
 }
 function TemplatePill({
   label,
@@ -179,35 +187,40 @@ function TemplatePill({
   classNames
 }) {
   if (selectedLabel) {
-    return React__default.createElement("div", {
-      className: cn('flex items-center gap-1 px-2 py-1 rounded-full bg-primary/10 text-primary text-xs font-medium border border-primary/20', classNames?.templatePillSelected)
-    }, React__default.createElement("span", {
-      className: "truncate max-w-[120px]",
-      title: selectedLabel
-    }, selectedLabel), React__default.createElement("button", {
-      type: "button",
-      onClick: onClearTemplate,
-      className: "ml-1 hover:bg-primary/20 rounded-full p-0.5 transition-colors",
-      "aria-label": "Remove template",
-      disabled: disabled
-    }, React__default.createElement(X, {
-      className: "h-3 w-3"
-    })), React__default.createElement("button", {
-      type: "button",
-      onClick: onClick,
-      className: "ml-1 hover:bg-primary/20 rounded-full p-0.5 transition-colors text-[10px]",
-      "aria-label": "Change template",
-      disabled: disabled
-    }, "\u25BC"));
+    return jsxs("div", {
+      className: cn('flex items-center gap-1 px-2 py-1 rounded-full bg-primary/10 text-primary text-xs font-medium border border-primary/20', classNames?.templatePillSelected),
+      children: [jsx("span", {
+        className: "truncate max-w-[120px]",
+        title: selectedLabel,
+        children: selectedLabel
+      }), jsx("button", {
+        type: "button",
+        onClick: onClearTemplate,
+        className: "ml-1 hover:bg-primary/20 rounded-full p-0.5 transition-colors",
+        "aria-label": "Remove template",
+        disabled: disabled,
+        children: jsx(X, {
+          className: "h-3 w-3"
+        })
+      }), jsx("button", {
+        type: "button",
+        onClick: onClick,
+        className: "ml-1 hover:bg-primary/20 rounded-full p-0.5 transition-colors text-[10px]",
+        "aria-label": "Change template",
+        disabled: disabled,
+        children: "\u25BC"
+      })]
+    });
   }
   const text = count != null && count > 0 ? `${label} (${count})` : label;
-  return React__default.createElement("button", {
+  return jsx("button", {
     type: "button",
     onClick: onClick,
     disabled: disabled,
     className: cn('flex items-center gap-1 rounded-full border border-border bg-muted/50 px-2 py-1 text-xs font-medium text-foreground transition-colors hover:border-primary hover:bg-primary/5', disabled && 'opacity-50 cursor-not-allowed' || '', classNames?.templatePill),
-    "aria-label": "Select template"
-  }, text);
+    "aria-label": "Select template",
+    children: text
+  });
 }
 function RightSection({
   rightItems,
@@ -216,31 +229,32 @@ function RightSection({
   classNames
 }) {
   if (rightCustomRender != null) {
-    return React__default.createElement("div", {
-      className: "flex items-center gap-1"
-    }, rightCustomRender);
+    return jsx("div", {
+      className: "flex items-center gap-1",
+      children: rightCustomRender
+    });
   }
   const right = rightItems ?? [];
   const rightEnabled = right.filter(item => item.enabled !== false);
   const filteredRight = micSendButton != null ? rightEnabled.filter(item => item.id !== 'mic') : rightEnabled;
   const hasRight = filteredRight.length > 0 || micSendButton != null;
   if (!hasRight) return null;
-  return React__default.createElement("div", {
-    className: "flex flex-wrap items-center gap-2 text-muted-foreground"
-  }, filteredRight.map(item => React__default.createElement(ToolbarIconButton, {
-    key: item.id,
-    item: item,
-    getDefaultIcon: id => defaultRightIconMap[id] ?? null,
-    classNames: classNames
-  })), micSendButton != null && React__default.createElement(MicSendButton, {
-    hasContent: micSendButton.hasContent,
-    onSend: micSendButton.onSend,
-    onMic: micSendButton.onMic,
-    disabled: micSendButton.disabled,
-    isLoading: micSendButton.isLoading,
-    onStop: micSendButton.onStop,
-    className: classNames?.micSendButton
-  }));
+  return jsxs("div", {
+    className: "flex flex-wrap items-center gap-2 text-muted-foreground",
+    children: [filteredRight.map(item => jsx(ToolbarIconButton, {
+      item: item,
+      getDefaultIcon: id => defaultRightIconMap[id] ?? null,
+      classNames: classNames
+    }, item.id)), micSendButton != null && jsx(MicSendButton, {
+      hasContent: micSendButton.hasContent,
+      onSend: micSendButton.onSend,
+      onMic: micSendButton.onMic,
+      disabled: micSendButton.disabled,
+      isLoading: micSendButton.isLoading,
+      onStop: micSendButton.onStop,
+      className: classNames?.micSendButton
+    })]
+  });
 }
 const defaultTextareaClassName = 'w-full outline-none border-none ring-0 focus:outline-none focus:ring-0 bg-transparent text-base text-foreground placeholder:text-muted-foreground disabled:opacity-50 resize-none overflow-y-auto max-h-[30vh] [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]';
 function DefaultTemplateModal({
@@ -271,82 +285,101 @@ function DefaultTemplateModal({
   function handleBackdropClick(e) {
     if (e.target === e.currentTarget) onClose();
   }
-  return React__default.createElement("div", {
+  return jsx("div", {
     className: "fixed inset-0 z-50 flex items-center justify-center bg-background/80 backdrop-blur-sm p-4",
-    onClick: handleBackdropClick
-  }, React__default.createElement("div", {
-    className: cn('bg-card w-full max-w-[720px] max-h-[80vh] rounded-xl flex flex-col overflow-hidden border border-border shadow-xl', modalClassName)
-  }, React__default.createElement("div", {
-    className: "h-12 px-4 border-b border-border flex items-center justify-between shrink-0"
-  }, React__default.createElement("h2", {
-    className: "text-sm font-semibold text-foreground"
-  }, title), React__default.createElement("button", {
-    type: "button",
-    onClick: onClose,
-    className: "p-1.5 rounded-lg hover:bg-accent text-muted-foreground transition-colors focus:outline-none focus:ring-2 focus:ring-ring",
-    "aria-label": "Close"
-  }, React__default.createElement(X, {
-    className: "h-4 w-4"
-  }))), React__default.createElement("div", {
-    className: "p-4 border-b border-border space-y-3"
-  }, React__default.createElement("div", {
-    className: "relative"
-  }, React__default.createElement(Search, {
-    className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground"
-  }), React__default.createElement("input", {
-    type: "text",
-    placeholder: "Search templates...",
-    value: searchQuery,
-    onChange: e => setSearchQuery(e.target.value),
-    className: "w-full pl-9 pr-3 py-2 border border-border rounded-lg bg-muted text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
-  })), React__default.createElement("div", {
-    className: "flex gap-1.5 flex-wrap"
-  }, categories.map(category => React__default.createElement("button", {
-    key: category,
-    type: "button",
-    onClick: () => setCategoryFilter(category),
-    className: cn('px-2.5 py-1 rounded-md text-xs font-medium transition-colors border', categoryFilter === category ? 'bg-primary/10 text-primary border-primary/20' : 'bg-card text-muted-foreground border-border hover:bg-muted hover:text-foreground')
-  }, category)))), React__default.createElement("div", {
-    className: "flex-1 overflow-y-auto p-4 min-h-0"
-  }, React__default.createElement("div", {
-    className: "grid grid-cols-1 sm:grid-cols-2 gap-3"
-  }, filteredTemplates.map(template => {
-    const isSelected = selectedId === template.id;
-    const isSuggested = suggestedId === template.id;
-    return React__default.createElement("button", {
-      key: template.id,
-      type: "button",
-      onClick: () => {
-        onSelect(template.id);
-        onClose();
-      },
-      className: cn('text-left p-3 rounded-lg border-2 transition-all', isSelected ? 'border-primary bg-primary/10 ring-2 ring-primary/20' : 'border-border hover:border-primary/50 hover:bg-muted/50', isSuggested && !isSelected && 'border-primary/30 bg-primary/5')
-    }, React__default.createElement("div", {
-      className: "flex items-start gap-2"
-    }, React__default.createElement("div", {
-      className: cn('p-1.5 rounded-md flex-shrink-0', isSelected ? 'bg-primary' : isSuggested ? 'bg-primary/20' : 'bg-secondary')
-    }, React__default.createElement(Layout, {
-      className: cn('h-3.5 w-3.5', isSelected ? 'text-primary-foreground' : isSuggested ? 'text-primary' : 'text-foreground')
-    })), React__default.createElement("div", {
-      className: "min-w-0 flex-1"
-    }, React__default.createElement("div", {
-      className: "flex items-center gap-1.5"
-    }, React__default.createElement("span", {
-      className: "font-medium text-sm text-foreground truncate"
-    }, template.label), isSelected && React__default.createElement(Check, {
-      className: "h-3.5 w-3.5 text-primary flex-shrink-0"
-    })), template.description && React__default.createElement("p", {
-      className: "text-xs text-muted-foreground mt-0.5 line-clamp-2"
-    }, template.description))));
-  })), filteredTemplates.length === 0 && React__default.createElement("div", {
-    className: "flex flex-col items-center justify-center py-12 text-center"
-  }, React__default.createElement(Search, {
-    className: "h-10 w-10 text-muted-foreground mb-3"
-  }), React__default.createElement("p", {
-    className: "text-sm font-medium text-foreground"
-  }, "No templates found"), React__default.createElement("p", {
-    className: "text-xs text-muted-foreground mt-1"
-  }, "Try adjusting search or filters")))));
+    onClick: handleBackdropClick,
+    children: jsxs("div", {
+      className: cn('bg-card w-full max-w-[720px] max-h-[80vh] rounded-xl flex flex-col overflow-hidden border border-border shadow-xl', modalClassName),
+      children: [jsxs("div", {
+        className: "h-12 px-4 border-b border-border flex items-center justify-between shrink-0",
+        children: [jsx("h2", {
+          className: "text-sm font-semibold text-foreground",
+          children: title
+        }), jsx("button", {
+          type: "button",
+          onClick: onClose,
+          className: "p-1.5 rounded-lg hover:bg-accent text-muted-foreground transition-colors focus:outline-none focus:ring-2 focus:ring-ring",
+          "aria-label": "Close",
+          children: jsx(X, {
+            className: "h-4 w-4"
+          })
+        })]
+      }), jsxs("div", {
+        className: "p-4 border-b border-border space-y-3",
+        children: [jsxs("div", {
+          className: "relative",
+          children: [jsx(Search, {
+            className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground"
+          }), jsx("input", {
+            type: "text",
+            placeholder: "Search templates...",
+            value: searchQuery,
+            onChange: e => setSearchQuery(e.target.value),
+            className: "w-full pl-9 pr-3 py-2 border border-border rounded-lg bg-muted text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+          })]
+        }), jsx("div", {
+          className: "flex gap-1.5 flex-wrap",
+          children: categories.map(category => jsx("button", {
+            type: "button",
+            onClick: () => setCategoryFilter(category),
+            className: cn('px-2.5 py-1 rounded-md text-xs font-medium transition-colors border', categoryFilter === category ? 'bg-primary/10 text-primary border-primary/20' : 'bg-card text-muted-foreground border-border hover:bg-muted hover:text-foreground'),
+            children: category
+          }, category))
+        })]
+      }), jsxs("div", {
+        className: "flex-1 overflow-y-auto p-4 min-h-0",
+        children: [jsx("div", {
+          className: "grid grid-cols-1 sm:grid-cols-2 gap-3",
+          children: filteredTemplates.map(template => {
+            const isSelected = selectedId === template.id;
+            const isSuggested = suggestedId === template.id;
+            return jsx("button", {
+              type: "button",
+              onClick: () => {
+                onSelect(template.id);
+                onClose();
+              },
+              className: cn('text-left p-3 rounded-lg border-2 transition-all', isSelected ? 'border-primary bg-primary/10 ring-2 ring-primary/20' : 'border-border hover:border-primary/50 hover:bg-muted/50', isSuggested && !isSelected && 'border-primary/30 bg-primary/5'),
+              children: jsxs("div", {
+                className: "flex items-start gap-2",
+                children: [jsx("div", {
+                  className: cn('p-1.5 rounded-md flex-shrink-0', isSelected ? 'bg-primary' : isSuggested ? 'bg-primary/20' : 'bg-secondary'),
+                  children: jsx(Layout, {
+                    className: cn('h-3.5 w-3.5', isSelected ? 'text-primary-foreground' : isSuggested ? 'text-primary' : 'text-foreground')
+                  })
+                }), jsxs("div", {
+                  className: "min-w-0 flex-1",
+                  children: [jsxs("div", {
+                    className: "flex items-center gap-1.5",
+                    children: [jsx("span", {
+                      className: "font-medium text-sm text-foreground truncate",
+                      children: template.label
+                    }), isSelected && jsx(Check, {
+                      className: "h-3.5 w-3.5 text-primary flex-shrink-0"
+                    })]
+                  }), template.description && jsx("p", {
+                    className: "text-xs text-muted-foreground mt-0.5 line-clamp-2",
+                    children: template.description
+                  })]
+                })]
+              })
+            }, template.id);
+          })
+        }), filteredTemplates.length === 0 && jsxs("div", {
+          className: "flex flex-col items-center justify-center py-12 text-center",
+          children: [jsx(Search, {
+            className: "h-10 w-10 text-muted-foreground mb-3"
+          }), jsx("p", {
+            className: "text-sm font-medium text-foreground",
+            children: "No templates found"
+          }), jsx("p", {
+            className: "text-xs text-muted-foreground mt-1",
+            children: "Try adjusting search or filters"
+          })]
+        })]
+      })]
+    })
+  });
 }
 /**
  * InputToolBar – UI only. Renders toolbar and optional built-in textarea from props.
@@ -379,47 +412,58 @@ function InputToolBar({
   const projectSettingsModal = projectSettingsModalOpen === true && onProjectSettingsModalClose != null && projectSettingsModalRender != null ? projectSettingsModalRender({
     onClose: onProjectSettingsModalClose
   }) : null;
-  return React__default.createElement(React__default.Fragment, null, templateModal, projectSettingsModal, React__default.createElement("section", {
-    className: cn('w-full overflow-visible rounded-[24px] border border-border/70 bg-card shadow-md', hasInputContent && 'cursor-text', classNames?.container, className),
-    onClick: hasInputContent ? onContainerClick : undefined,
-    role: hasInputContent ? 'presentation' : undefined
-  }, React__default.createElement("div", {
-    className: cn('flex px-3 py-2', hasInputContent ? 'flex-col gap-2' : 'flex-wrap items-center gap-3')
-  }, hasInputContent && React__default.createElement("div", {
-    className: "min-w-0 flex-1 flex flex-col gap-2"
-  }, effectiveTopContent, inputConfig != null ? React__default.createElement(React__default.Fragment, null, React__default.createElement("label", {
-    htmlFor: inputConfig.id ?? 'input-toolbar-input',
-    className: "sr-only"
-  }, inputConfig.placeholder ?? 'Message'), React__default.createElement("textarea", {
-    ref: inputConfig.inputRef,
-    id: inputConfig.id ?? 'input-toolbar-input',
-    name: inputConfig.name ?? 'query',
-    value: inputConfig.value,
-    onChange: inputConfig.onChange,
-    onKeyDown: inputConfig.onKeyDown,
-    onPaste: inputConfig.onPaste,
-    placeholder: inputConfig.placeholder ?? 'Ask anything...',
-    disabled: inputConfig.disabled,
-    rows: 1,
-    className: defaultTextareaClassName
-  })) : children), React__default.createElement("div", {
-    className: cn('flex flex-wrap items-center gap-3', hasInputContent && 'pt-2')
-  }, React__default.createElement("div", {
-    className: cn('flex items-center gap-2', hasInputContent && 'mb-2')
-  }, React__default.createElement(LeftSection, {
-    leftItems: leftItems,
-    templateButton: templateButton,
-    leftCustomRender: leftCustomRender,
-    classNames: classNames
-  })), !hasInputContent && React__default.createElement("div", {
-    className: "min-w-0 flex-1",
-    "aria-hidden": true
-  }), React__default.createElement("div", {
-    className: "flex flex-1 flex-wrap items-center justify-end gap-2"
-  }, React__default.createElement(RightSection, {
-    rightItems: rightItems,
-    rightCustomRender: rightCustomRender,
-    micSendButton: micSendButton,
-    classNames: classNames
-  }))))));
+  return jsxs(Fragment, {
+    children: [templateModal, projectSettingsModal, jsx("section", {
+      className: cn('w-full overflow-visible rounded-[24px] border border-border/70 bg-card shadow-md', hasInputContent && 'cursor-text', classNames?.container, className),
+      onClick: hasInputContent ? onContainerClick : undefined,
+      role: hasInputContent ? 'presentation' : undefined,
+      children: jsxs("div", {
+        className: cn('flex px-3 py-2', hasInputContent ? 'flex-col gap-2' : 'flex-wrap items-center gap-3'),
+        children: [hasInputContent && jsxs("div", {
+          className: "min-w-0 flex-1 flex flex-col gap-2",
+          children: [effectiveTopContent, inputConfig != null ? jsxs(Fragment, {
+            children: [jsx("label", {
+              htmlFor: inputConfig.id ?? 'input-toolbar-input',
+              className: "sr-only",
+              children: inputConfig.placeholder ?? 'Message'
+            }), jsx("textarea", {
+              ref: inputConfig.inputRef,
+              id: inputConfig.id ?? 'input-toolbar-input',
+              name: inputConfig.name ?? 'query',
+              value: inputConfig.value,
+              onChange: inputConfig.onChange,
+              onKeyDown: inputConfig.onKeyDown,
+              onPaste: inputConfig.onPaste,
+              placeholder: inputConfig.placeholder ?? 'Ask anything...',
+              disabled: inputConfig.disabled,
+              rows: 1,
+              className: defaultTextareaClassName
+            })]
+          }) : children]
+        }), jsxs("div", {
+          className: cn('flex flex-wrap items-center gap-3', hasInputContent && 'pt-2'),
+          children: [jsx("div", {
+            className: cn('flex items-center gap-2', hasInputContent && 'mb-2'),
+            children: jsx(LeftSection, {
+              leftItems: leftItems,
+              templateButton: templateButton,
+              leftCustomRender: leftCustomRender,
+              classNames: classNames
+            })
+          }), !hasInputContent && jsx("div", {
+            className: "min-w-0 flex-1",
+            "aria-hidden": true
+          }), jsx("div", {
+            className: "flex flex-1 flex-wrap items-center justify-end gap-2",
+            children: jsx(RightSection, {
+              rightItems: rightItems,
+              rightCustomRender: rightCustomRender,
+              micSendButton: micSendButton,
+              classNames: classNames
+            })
+          })]
+        })]
+      })
+    })]
+  });
 }export{InputToolBar};//# sourceMappingURL=InputToolBar.js.map