@copilotz/chat-ui 0.9.7 → 0.9.9

package/dist/index.cjs

@@ -2895,24 +2895,24 @@ var Sidebar2 = ({
           ]
         }
       ) }),
-      tagsEnabled && threadTagsConfig?.groupingEnabled !== false && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "px-2 py-2 group-data-[collapsible=icon]:hidden", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "grid grid-cols-2 gap-1 rounded-md bg-sidebar-accent/50 p-1", children: [
+      tagsEnabled && threadTagsConfig?.groupingEnabled !== false && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "px-2 py-2 group-data-[collapsible=icon]:hidden", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "grid grid-cols-2 gap-1 rounded-lg border border-sidebar-border/70 bg-sidebar-accent/70 p-1", children: [
         /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           Button,
           {
-            variant: groupBy === "date" ? "secondary" : "ghost",
+            variant: "ghost",
             size: "sm",
             onClick: () => setGroupBy("date"),
-            className: "h-7 px-2 text-xs",
+            className: `h-7 rounded-md px-2 text-xs font-semibold transition-colors ${groupBy === "date" ? "border border-sidebar-border bg-sidebar text-sidebar-foreground shadow-sm hover:bg-sidebar" : "text-sidebar-foreground/70 hover:bg-sidebar-accent hover:text-sidebar-foreground"}`,
             children: config.labels?.groupByDate || "Date"
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           Button,
           {
-            variant: groupBy === "tag" ? "secondary" : "ghost",
+            variant: "ghost",
             size: "sm",
             onClick: () => setGroupBy("tag"),
-            className: "h-7 px-2 text-xs",
+            className: `h-7 rounded-md px-2 text-xs font-semibold transition-colors ${groupBy === "tag" ? "border border-sidebar-border bg-sidebar text-sidebar-foreground shadow-sm hover:bg-sidebar" : "text-sidebar-foreground/70 hover:bg-sidebar-accent hover:text-sidebar-foreground"}`,
             children: config.labels?.groupByTag || "Tag"
           }
         )
@@ -3096,7 +3096,7 @@ var Sidebar2 = ({
         );
       })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SidebarFooter, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SidebarFooter, { className: "border-t border-sidebar-border/70 px-3 pb-[calc(env(safe-area-inset-bottom)+1rem)] pt-3", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       UserMenu,
       {
         user,
@@ -3363,7 +3363,8 @@ var TargetAgentSelector = (0, import_react5.memo)(({
   onTargetChange,
   label = "Target",
   placeholder = "Select agent",
-  disabled = false
+  disabled = false,
+  compact = false
 }) => {
   const agentsWithColors = (0, import_react5.useMemo)(() => assignAgentColors(agents), [agents]);
   const selectedAgent = (0, import_react5.useMemo)(
@@ -3375,7 +3376,7 @@ var TargetAgentSelector = (0, import_react5.memo)(({
       Button,
       {
         variant: "ghost",
-        className: "h-9 px-3 gap-1.5 font-medium text-base hover:bg-accent/50",
+        className: `gap-1.5 font-medium hover:bg-accent/50 ${compact ? "h-9 rounded-full px-2 text-sm text-muted-foreground hover:text-foreground" : "h-9 px-3 text-base"}`,
         disabled,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react9.AtSign, { className: "h-4 w-4 text-muted-foreground" }),
@@ -4538,6 +4539,9 @@ var ChatInput = (0, import_react8.memo)(function ChatInput2({
   className = "",
   config,
   mentionAgents = [],
+  targetAgentId = null,
+  showTargetAgentSelector = false,
+  targetAgentSelectorPlaceholder,
   onTargetAgentChange
 }) {
   const voiceDefaultMode = config?.voiceCompose?.defaultMode ?? "text";
@@ -5068,7 +5072,7 @@ var ChatInput = (0, import_react8.memo)(function ChatInput2({
   };
   const canAddMoreAttachments = attachments.length < maxAttachments;
   const showVoiceComposer = enableAudioRecording && isVoiceComposerOpen;
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: `border-t bg-background/95 py-2 ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "mx-auto w-full max-w-3xl space-y-3 px-3 md:px-2", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: `bg-transparent py-0 ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "mx-auto w-full max-w-3xl space-y-3 px-3 md:px-2", children: [
     uploadProgress.size > 0 && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "space-y-2", children: Array.from(uploadProgress.entries()).map(([id, progress]) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
       FileUploadItem,
       {
@@ -5183,38 +5187,51 @@ var ChatInput = (0, import_react8.memo)(function ChatInput2({
             )) }) })
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex min-h-10 items-center justify-between gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "flex min-w-0 items-center gap-1", children: enableFileUpload && canAddMoreAttachments && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-                "input",
-                {
-                  ref: fileInputRef,
-                  type: "file",
-                  multiple: true,
-                  accept: acceptedFileTypes.length > 0 ? acceptedFileTypes.join(",") : void 0,
-                  onChange: handleFileSelect,
-                  className: "hidden"
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Tooltip, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-                  Button,
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex min-w-0 items-center gap-1", children: [
+              enableFileUpload && canAddMoreAttachments && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                  "input",
                   {
-                    type: "button",
-                    variant: "ghost",
-                    size: "icon",
-                    className: "h-9 w-9 rounded-full text-muted-foreground hover:text-foreground",
-                    onClick: (e) => {
-                      e.preventDefault();
-                      e.stopPropagation();
-                      fileInputRef.current?.click();
-                    },
-                    disabled,
-                    children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react12.Paperclip, { className: "h-4 w-4" })
+                    ref: fileInputRef,
+                    type: "file",
+                    multiple: true,
+                    accept: acceptedFileTypes.length > 0 ? acceptedFileTypes.join(",") : void 0,
+                    onChange: handleFileSelect,
+                    className: "hidden"
                   }
-                ) }),
-                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TooltipContent, { children: config?.labels?.attachFileTooltip })
-              ] })
-            ] }) }),
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Tooltip, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                    Button,
+                    {
+                      type: "button",
+                      variant: "ghost",
+                      size: "icon",
+                      className: "h-9 w-9 rounded-full text-muted-foreground hover:text-foreground",
+                      onClick: (e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        fileInputRef.current?.click();
+                      },
+                      disabled,
+                      children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react12.Paperclip, { className: "h-4 w-4" })
+                    }
+                  ) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TooltipContent, { children: config?.labels?.attachFileTooltip })
+                ] })
+              ] }),
+              showTargetAgentSelector && onTargetAgentChange && mentionAgents.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                TargetAgentSelector,
+                {
+                  agents: mentionAgents,
+                  targetAgentId,
+                  onTargetChange: onTargetAgentChange,
+                  placeholder: targetAgentSelectorPlaceholder || "Select agent",
+                  disabled: disabled || isGenerating,
+                  compact: true
+                }
+              )
+            ] }),
             /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex shrink-0 items-center gap-1", children: [
               enableAudioRecording && canAddMoreAttachments && !value.trim() && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Tooltip, { children: [
                 /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
@@ -6476,50 +6493,41 @@ var ChatUI = ({
                   ] })
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "bg-background pb-[env(safe-area-inset-bottom)]", children: [
-                isMultiAgentMode && shouldShowAgentSelector && onTargetAgentChange && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "px-4 pt-1", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-                  TargetAgentSelector,
-                  {
-                    agents: participantIds && participantIds.length > 0 ? agentOptions.filter(
-                      (a) => participantIds.includes(a.id)
-                    ) : agentOptions,
-                    targetAgentId,
-                    onTargetChange: onTargetAgentChange,
-                    placeholder: config.agentSelector?.label || "Select agent",
-                    disabled: isGenerating
-                  }
-                ) }),
-                /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-                  ChatInput,
-                  {
-                    value: inputValue,
-                    onChange: (value) => {
-                      setInputValue(value);
-                      if (initialInputApplied.current && !initialInputConsumedRef.current) {
-                        initialInputConsumedRef.current = true;
-                        onInitialInputConsumed?.();
-                      }
-                    },
-                    onSubmit: handleSendMessage,
-                    attachments,
-                    onAttachmentsChange: setAttachments,
-                    placeholder: config.labels.inputPlaceholder,
-                    disabled: false,
-                    isGenerating,
-                    onStopGeneration: callbacks.onStopGeneration,
-                    enableFileUpload: config.features.enableFileUpload,
-                    enableAudioRecording: config.features.enableAudioRecording,
-                    maxAttachments: config.features.maxAttachments,
-                    maxFileSize: config.features.maxFileSize,
-                    acceptedFileTypes: config.features.acceptedFileTypes,
-                    config,
-                    mentionAgents: participantIds && participantIds.length > 0 ? agentOptions.filter(
-                      (a) => participantIds.includes(a.id)
-                    ) : agentOptions,
-                    onTargetAgentChange
-                  }
-                )
-              ] })
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "-mt-8 bg-gradient-to-t from-background via-background/95 to-transparent px-0 pb-[env(safe-area-inset-bottom)] pt-10", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                ChatInput,
+                {
+                  value: inputValue,
+                  onChange: (value) => {
+                    setInputValue(value);
+                    if (initialInputApplied.current && !initialInputConsumedRef.current) {
+                      initialInputConsumedRef.current = true;
+                      onInitialInputConsumed?.();
+                    }
+                  },
+                  onSubmit: handleSendMessage,
+                  attachments,
+                  onAttachmentsChange: setAttachments,
+                  placeholder: config.labels.inputPlaceholder,
+                  disabled: false,
+                  isGenerating,
+                  onStopGeneration: callbacks.onStopGeneration,
+                  enableFileUpload: config.features.enableFileUpload,
+                  enableAudioRecording: config.features.enableAudioRecording,
+                  maxAttachments: config.features.maxAttachments,
+                  maxFileSize: config.features.maxFileSize,
+                  acceptedFileTypes: config.features.acceptedFileTypes,
+                  config,
+                  mentionAgents: participantIds && participantIds.length > 0 ? agentOptions.filter(
+                    (a) => participantIds.includes(a.id)
+                  ) : agentOptions,
+                  targetAgentId,
+                  showTargetAgentSelector: Boolean(
+                    isMultiAgentMode && shouldShowAgentSelector && onTargetAgentChange
+                  ),
+                  targetAgentSelectorPlaceholder: config.agentSelector?.label || "Select agent",
+                  onTargetAgentChange
+                }
+              ) })
             ] }),
             config?.customComponent?.component && !isMobile && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
               "div",