@admin-layout/tailwind-ui 12.2.4-alpha.1 → 12.2.4-alpha.103

package/lib/components/AIToolbar/components/completion/Files.js

@@ -0,0 +1,166 @@
+import {jsxs,jsx,Fragment}from'react/jsx-runtime';import {PaperclipIcon,PlusIcon,XIcon,TrashIcon}from'lucide-react';import {useRef}from'react';import'../../../../shardui/accordion.js';import'../../../../shardui/alert.js';import'../../../../shardui/alert-dialog.js';import'@radix-ui/react-aspect-ratio';import'../../../../shardui/avatar.js';import'../../../../shardui/badge.js';import'../../../../shardui/breadcrumb.js';import {Button}from'../../../../shardui/button.js';import'../../../../shardui/calendar.js';import'../../../../shardui/card.js';import'../../../../shardui/carousel.js';import'../../../../shardui/chart.js';import'../../../../shardui/checkbox.js';import'@radix-ui/react-collapsible';import'../../../../shardui/command.js';import'../../../../shardui/context-menu.js';import'../../../../shardui/dialog.js';import'../../../../shardui/drawer.js';import'../../../../shardui/dropdown-menu.js';import'../../../../shardui/form.js';import'../../../../shardui/hover-card.js';import'../../../../shardui/input.js';import'../../../../shardui/input-otp.js';import'../../../../shardui/label.js';import'../../../../shardui/menubar.js';import'../../../../shardui/navigation-menu.js';import'../../../../shardui/pagination.js';import {Popover,PopoverTrigger,PopoverContent}from'../../../../shardui/popover.js';import'../../../../shardui/progress.js';import'../../../../shardui/radio-group.js';import'react-resizable-panels';import'../../../../utils/isBrowser/index.js';import {cn}from'../../../../utils/util.js';import'fast-deep-equal/react.js';import {ScrollArea}from'../../../../shardui/scroll-area.js';import'../../../../shardui/select.js';import'../../../../shardui/separator.js';import'../../../../shardui/sheet.js';import'../../../../shardui/sidebar.js';import'../../../../shardui/slider.js';import'../../../ThemeProvider/ThemeProvider.js';import'sonner';import'../../../../shardui/switch.js';import'../../../../shardui/table.js';import'../../../../shardui/tabs.js';import'../../../../shardui/textarea.js';import'../../../../shardui/toast.js';import'../../../../shardui/toggle.js';import'../../../../shardui/toggle-group.js';import'../../../../shardui/tooltip.js';const DEFAULT_MAX_FILES = 10;
+const FILE_ACCEPT = 'image/*,.txt,.md,.markdown,text/plain,text/markdown,text/x-markdown';
+const IMAGE_FILE_EXTENSION = /\.(png|jpe?g|gif|webp)$/i;
+function isImageFile(file) {
+  return (file.type?.startsWith('image/') ?? false) || IMAGE_FILE_EXTENSION.test(file.name);
+}
+function formatFileSize(size) {
+  if (typeof size !== 'number') {
+    return null;
+  }
+  return `${(size / 1024 / 1024).toFixed(2)} MB`;
+}
+function getMimeType(file) {
+  return file.type && file.type.includes('/') ? file.type : 'application/octet-stream';
+}
+function Files({
+  attachedFiles,
+  handleFileSelect,
+  removeFile,
+  onRemoveAllFiles,
+  isLoading,
+  isFilesPopoverOpen,
+  setIsFilesPopoverOpen,
+  supportsImages,
+  maxFiles = DEFAULT_MAX_FILES,
+  toolbarShowElementTitles
+}) {
+  const fileInputRef = useRef(null);
+  const showTitles = toolbarShowElementTitles !== false;
+  const handleAddMoreClick = () => {
+    fileInputRef.current?.click();
+  };
+  const canAddMore = attachedFiles.length < maxFiles;
+  return jsxs("div", {
+    className: "relative",
+    children: [jsxs(Popover, {
+      open: isFilesPopoverOpen,
+      onOpenChange: setIsFilesPopoverOpen,
+      children: [jsx(PopoverTrigger, {
+        asChild: true,
+        children: jsx(Button, {
+          size: "icon",
+          disabled: isLoading || supportsImages === false,
+          className: "cursor-pointer",
+          title: showTitles ? supportsImages !== false ? 'Attach files' : 'File upload not supported by current AI provider' : undefined,
+          children: jsx(PaperclipIcon, {
+            className: "h-4 w-4"
+          })
+        })
+      }), attachedFiles.length > 0 && jsx("div", {
+        className: "absolute -top-2 -right-2 bg-primary-foreground text-primary rounded-full h-5 w-5 flex border border-primary items-center justify-center text-xs font-medium",
+        children: attachedFiles.length
+      }), jsx(PopoverContent, {
+        align: "end",
+        side: "bottom",
+        className: cn('z-[200] max-h-[min(85vh,calc(100vh-2rem))] flex flex-col p-0 border shadow-lg overflow-hidden', attachedFiles.length > 0 ? 'w-[min(100vw,36rem)]' : 'w-80'),
+        sideOffset: 8,
+        children: attachedFiles.length === 0 ? jsxs("div", {
+          className: "p-4 space-y-3",
+          children: [jsx("p", {
+            className: "text-sm text-muted-foreground",
+            children: "No files attached yet. Choose files to add them to your message."
+          }), jsxs(Button, {
+            type: "button",
+            className: "w-full",
+            variant: "outline",
+            disabled: isLoading || supportsImages === false,
+            onClick: () => fileInputRef.current?.click(),
+            children: [jsx(PlusIcon, {
+              className: "h-4 w-4 mr-2"
+            }), "Choose files"]
+          })]
+        }) : jsxs(Fragment, {
+          children: [jsxs("div", {
+            className: "flex items-center justify-between px-4 py-2 border-b bg-muted/30 shrink-0",
+            children: [jsxs("h3", {
+              className: "font-semibold text-sm select-none",
+              children: ["Attached Files (", attachedFiles.length, "/", maxFiles, ")"]
+            }), jsx(Button, {
+              size: "icon",
+              variant: "ghost",
+              onClick: () => setIsFilesPopoverOpen(false),
+              className: "cursor-pointer",
+              title: showTitles ? 'Close' : undefined,
+              children: jsx(XIcon, {
+                className: "h-4 w-4"
+              })
+            })]
+          }), jsx(ScrollArea, {
+            className: "p-4 min-h-0 flex-1 max-h-[min(32rem,calc(85vh-10rem))]",
+            children: jsx("div", {
+              className: `gap-3 ${attachedFiles.length <= 2 ? 'flex flex-col' : 'grid grid-cols-2'}`,
+              children: attachedFiles.map(file => {
+                const imageFile = isImageFile(file);
+                const sizeLabel = formatFileSize(file.size);
+                const mimeType = getMimeType(file);
+                return jsxs("div", {
+                  className: "relative group border rounded-lg overflow-hidden bg-muted/20 min-h-[8rem]",
+                  children: [imageFile && file.base64 ? jsx("img", {
+                    src: `data:${mimeType};base64,${file.base64}`,
+                    alt: file.name,
+                    className: "w-full object-cover max-h-64"
+                  }) : jsxs("div", {
+                    className: "flex min-h-32 flex-col items-center justify-center gap-2 p-4 text-center",
+                    children: [jsx(PaperclipIcon, {
+                      className: "h-8 w-8 text-muted-foreground"
+                    }), jsx("div", {
+                      className: "max-w-full truncate text-sm font-medium",
+                      children: file.name
+                    }), sizeLabel ? jsx("div", {
+                      className: "text-xs text-muted-foreground",
+                      children: sizeLabel
+                    }) : null]
+                  }), imageFile ? jsxs("div", {
+                    className: "absolute bottom-0 left-0 right-0 bg-black/70 text-white p-2 text-xs",
+                    children: [jsx("div", {
+                      className: "truncate font-medium",
+                      children: file.name
+                    }), sizeLabel ? jsx("div", {
+                      className: "text-gray-300",
+                      children: sizeLabel
+                    }) : null]
+                  }) : null, jsx(Button, {
+                    size: "icon",
+                    variant: "default",
+                    className: "absolute top-2 right-2 h-6 w-6 cursor-pointer",
+                    onClick: () => removeFile(file.id),
+                    title: showTitles ? 'Remove file' : undefined,
+                    children: jsx(XIcon, {
+                      className: "h-3 w-3"
+                    })
+                  })]
+                }, file.id);
+              })
+            })
+          }), jsxs("div", {
+            className: "shrink-0 border-t bg-background p-3 flex flex-row gap-2",
+            children: [jsxs(Button, {
+              onClick: handleAddMoreClick,
+              disabled: !canAddMore || isLoading,
+              className: "w-2/4",
+              variant: "outline",
+              children: [jsx(PlusIcon, {
+                className: "h-4 w-4 mr-2"
+              }), "Add More Files ", !canAddMore && `(${maxFiles} max)`]
+            }), jsxs(Button, {
+              className: "w-2/4",
+              variant: "destructive",
+              onClick: onRemoveAllFiles,
+              children: [jsx(TrashIcon, {
+                className: "h-4 w-4 mr-2"
+              }), "Remove All Files"]
+            })]
+          })]
+        })
+      })]
+    }), jsx("input", {
+      ref: fileInputRef,
+      type: "file",
+      multiple: true,
+      accept: FILE_ACCEPT,
+      onChange: handleFileSelect,
+      className: "hidden"
+    })]
+  });
+}export{Files};//# sourceMappingURL=Files.js.map

package/lib/components/AIToolbar/components/completion/Files.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Files.js","sources":["../../../../../src/components/AIToolbar/components/completion/Files.tsx"],"sourcesContent":[null],"names":[],"mappings":"6nEAyCC,iBAAA,GAAA,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/components/AIToolbar/components/completion/Input.d.ts

@@ -0,0 +1,6 @@
+import { UseCompletionReturn } from '../types';
+export declare const Input: ({ isPopoverOpen, isLoading, reset, input, setInput, handleKeyPress, handlePaste, currentConversationId, conversationHistory, startNewConversation, messageHistoryOpen, setMessageHistoryOpen, error, response, cancel, scrollAreaRef, inputRef, isHidden, keepEngaged, setKeepEngaged, regenerateAssistantMessage, toolbarShowElementTitles, }: UseCompletionReturn & {
+    isHidden: boolean;
+    toolbarShowElementTitles?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Input.d.ts.map

package/lib/components/AIToolbar/components/completion/Input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../../../src/components/AIToolbar/components/completion/Input.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAQ/C,eAAO,MAAM,KAAK,GAAI,gVAuBnB,mBAAmB,GAAG;IACrB,QAAQ,EAAE,OAAO,CAAC;IAClB,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACtC,4CAgUA,CAAC"}

package/lib/components/AIToolbar/components/completion/Input.js

@@ -0,0 +1,287 @@
+import {jsx,jsxs,Fragment}from'react/jsx-runtime';import {useRef,useMemo,useLayoutEffect}from'react';import {AIToolbarInputSurface}from'../AIToolbarPrimitives.js';import {XIcon,Loader2}from'lucide-react';import'../../../../shardui/accordion.js';import'../../../../shardui/alert.js';import'../../../../shardui/alert-dialog.js';import'@radix-ui/react-aspect-ratio';import'../../../../shardui/avatar.js';import'../../../../shardui/badge.js';import'../../../../shardui/breadcrumb.js';import {Button}from'../../../../shardui/button.js';import'../../../../shardui/calendar.js';import'../../../../shardui/card.js';import'../../../../shardui/carousel.js';import'../../../../shardui/chart.js';import'../../../../shardui/checkbox.js';import'@radix-ui/react-collapsible';import'../../../../shardui/command.js';import'../../../../shardui/context-menu.js';import'../../../../shardui/dialog.js';import'../../../../shardui/drawer.js';import'../../../../shardui/dropdown-menu.js';import'../../../../shardui/form.js';import'../../../../shardui/hover-card.js';import {Input as Input$1}from'../../../../shardui/input.js';import'../../../../shardui/input-otp.js';import'../../../../shardui/label.js';import'../../../../shardui/menubar.js';import'../../../../shardui/navigation-menu.js';import'../../../../shardui/pagination.js';import {Popover,PopoverContent,PopoverTrigger}from'../../../../shardui/popover.js';import'../../../../shardui/progress.js';import'../../../../shardui/radio-group.js';import'react-resizable-panels';import'../../../../utils/isBrowser/index.js';import {cn}from'../../../../utils/util.js';import'fast-deep-equal/react.js';import'../../../../shardui/scroll-area.js';import'../../../../shardui/select.js';import'../../../../shardui/separator.js';import'../../../../shardui/sheet.js';import'../../../../shardui/sidebar.js';import'../../../../shardui/slider.js';import'../../../ThemeProvider/ThemeProvider.js';import'sonner';import {Switch}from'../../../../shardui/switch.js';import'../../../../shardui/table.js';import'../../../../shardui/tabs.js';import'../../../../shardui/textarea.js';import'../../../../shardui/toast.js';import'../../../../shardui/toggle.js';import'../../../../shardui/toggle-group.js';import'../../../../shardui/tooltip.js';import {Markdown}from'../Markdown/index.js';import {AssistantMessageActions}from'./AssistantMessageActions.js';import {CopyButton}from'../Markdown/copy-button.js';import {MessageHistory}from'./MessageHistory.js';import {useActiveCharacter}from'../../hooks/useActiveCharacter.js';import {useChatBackgroundImage}from'../../hooks/useChatBackgroundImage.js';import {AssistantAvatar}from'./AssistantAvatar.js';import {CharacterPicker}from'./CharacterPicker.js';const Input = ({
+  isPopoverOpen,
+  isLoading,
+  reset,
+  input,
+  setInput,
+  handleKeyPress,
+  handlePaste,
+  currentConversationId,
+  conversationHistory,
+  startNewConversation,
+  messageHistoryOpen,
+  setMessageHistoryOpen,
+  error,
+  response,
+  cancel,
+  scrollAreaRef,
+  inputRef,
+  isHidden,
+  keepEngaged,
+  setKeepEngaged,
+  regenerateAssistantMessage,
+  toolbarShowElementTitles
+}) => {
+  const showTitles = toolbarShowElementTitles !== false;
+  const conversationEndRef = useRef(null);
+  const character = useActiveCharacter();
+  const assistantName = character?.name ?? 'AI';
+  const chatBgImage = useChatBackgroundImage();
+  const sortedAsc = useMemo(() => [...conversationHistory].sort((a, b) => (a.timestamp ?? 0) - (b.timestamp ?? 0)), [conversationHistory]);
+  /** In-flight assistant bubble: hide when history already contains the same assistant text (avoids double render if `response` lingers). */
+  const streamingAssistantVisible = useMemo(() => {
+    if (isLoading) return true;
+    if (!response) return false;
+    const last = sortedAsc[sortedAsc.length - 1];
+    if (last?.role === 'assistant' && last.content === response) {
+      return false;
+    }
+    return true;
+  }, [isLoading, response, sortedAsc]);
+  /** Keep the latest assistant stream and new turns in view inside the popover scroll viewport. */
+  useLayoutEffect(() => {
+    if (!isPopoverOpen) return;
+    const anchor = conversationEndRef.current;
+    if (!anchor || !scrollAreaRef.current) return;
+    const scrollToEnd = () => {
+      anchor.scrollIntoView({
+        block: 'end',
+        behavior: 'auto',
+        inline: 'nearest'
+      });
+    };
+    const outer = requestAnimationFrame(() => {
+      requestAnimationFrame(scrollToEnd);
+    });
+    return () => cancelAnimationFrame(outer);
+  }, [isPopoverOpen, sortedAsc, response, isLoading, error, streamingAssistantVisible]);
+  const copyPayload = useMemo(() => {
+    const lines = sortedAsc.map(m => m.role === 'user' ? `You:\n${m.content}` : `${assistantName}:\n${m.content}`);
+    const last = sortedAsc[sortedAsc.length - 1];
+    if (response && !(last?.role === 'assistant' && last.content === response)) {
+      lines.push(`${assistantName}:\n${response}`);
+    }
+    return lines.join('\n\n');
+  }, [sortedAsc, response, assistantName]);
+  return jsx("div", {
+    className: "relative flex-1",
+    children: jsxs(Popover, {
+      open: isPopoverOpen,
+      onOpenChange: open => {
+        if (!open && !isLoading && !keepEngaged) {
+          reset();
+        }
+      },
+      children: [jsxs(PopoverContent, {
+        align: "center",
+        side: "top",
+        sideOffset: 8,
+        collisionPadding: {
+          top: 8,
+          bottom: 8,
+          left: 8,
+          right: 8
+        },
+        className: cn('relative z-[200] flex h-[min(90vh,calc(100dvh-1rem))] flex-col overflow-hidden border p-0 text-popover-foreground shadow-lg',
+        // Solid base when no wallpaper; translucent so the wallpaper bleeds through when one is selected.
+        chatBgImage ? 'bg-popover/70' : 'bg-popover', 'w-[calc(100vw-16px)] max-w-[760px] min-w-0 rounded-md'),
+        children: [chatBgImage ? jsxs(Fragment, {
+          children: [jsx("div", {
+            "aria-hidden": true,
+            className: "pointer-events-none absolute inset-0 bg-cover bg-center",
+            style: {
+              backgroundImage: `url(${chatBgImage})`
+            }
+          }), jsx("div", {
+            "aria-hidden": true,
+            className: "pointer-events-none absolute inset-0 bg-background/30 backdrop-blur-[2px]"
+          })]
+        }) : null, jsxs("div", {
+          className: "relative z-10 flex shrink-0 items-center justify-between border-b bg-muted/30 px-4 py-2",
+          children: [jsxs("div", {
+            className: "flex flex-row items-center gap-2",
+            children: [jsx("h3", {
+              className: "select-none text-xs font-semibold",
+              children: keepEngaged ? 'Conversation Mode' : 'AI Response'
+            }), jsx(CharacterPicker, {
+              toolbarShowElementTitles: showTitles
+            }), jsx("div", {
+              className: "text-[10px] text-muted-foreground/70",
+              children: "(Use arrow keys to scroll)"
+            })]
+          }), jsxs("div", {
+            className: "flex select-none items-center gap-2",
+            children: [jsxs("div", {
+              className: "mr-2 flex flex-row items-center gap-2",
+              children: [jsx("p", {
+                className: "text-[10px]",
+                children: `Toggle ${keepEngaged ? 'AI response' : 'conversation mode'}`
+              }), jsxs("span", {
+                className: "rounded border border-input/50 bg-muted/30 px-1 py-0 text-[10px] text-muted-foreground/60",
+                children: [navigator.platform.toLowerCase().includes('mac') ? '⌘' : 'Ctrl', " + K"]
+              }), jsx(Switch, {
+                checked: keepEngaged,
+                onCheckedChange: checked => {
+                  setKeepEngaged(checked);
+                  setTimeout(() => {
+                    inputRef?.current?.focus();
+                  }, 100);
+                }
+              })]
+            }), jsx(CopyButton, {
+              content: copyPayload
+            }), jsx(Button, {
+              size: "icon",
+              variant: "ghost",
+              onClick: () => {
+                if (isLoading) {
+                  cancel();
+                } else if (keepEngaged) {
+                  setKeepEngaged(false);
+                  startNewConversation();
+                } else {
+                  reset();
+                }
+              },
+              className: "cursor-pointer",
+              title: showTitles ? isLoading ? 'Cancel loading' : keepEngaged ? 'Close and start new conversation' : 'Clear conversation' : undefined,
+              children: jsx(XIcon, {})
+            })]
+          })]
+        }), jsx("div", {
+          ref: scrollAreaRef,
+          className: cn('relative z-10 min-h-0 flex-1 basis-0 overflow-x-hidden overflow-y-scroll overscroll-contain', 'pr-1 [scrollbar-gutter:stable]'),
+          children: jsxs("div", {
+            className: "space-y-3 p-4 pb-8",
+            children: [error ? jsxs("div", {
+              className: "rounded border border-destructive/20 bg-destructive/10 p-3 text-sm text-destructive",
+              children: [jsx("strong", {
+                children: "Error:"
+              }), " ", error]
+            }) : null, sortedAsc.map((msg, idx) => jsx("div", {
+              className: cn('flex w-full gap-2', msg.role === 'user' ? 'justify-end' : 'justify-start'),
+              children: jsx("div", {
+                className: cn('rounded-xl px-3 py-2 text-sm shadow-sm', msg.role === 'user' ? 'max-w-[min(100%,40rem)] border border-border/60 bg-muted/70 text-foreground' : 'min-w-0 max-w-full flex-1 border border-border/60 bg-muted/70'),
+                children: msg.role === 'user' ? jsxs(Fragment, {
+                  children: [jsxs("div", {
+                    className: "mb-1.5 flex items-center gap-2",
+                    children: [jsx("span", {
+                      className: "text-[10px] font-semibold uppercase text-muted-foreground",
+                      children: "You"
+                    }), jsx("span", {
+                      className: "text-[11px] text-muted-foreground",
+                      children: new Date(msg.timestamp).toLocaleTimeString([], {
+                        hour: '2-digit',
+                        minute: '2-digit'
+                      })
+                    })]
+                  }), jsx(Markdown, {
+                    children: msg.content
+                  })]
+                }) : jsxs("div", {
+                  className: "flex w-full gap-3",
+                  children: [jsx(AssistantAvatar, {
+                    avatarSrc: character?.avatarSrc ?? null,
+                    index: idx + 1,
+                    characterFileName: character?.fileName ?? null,
+                    text: msg.content
+                  }), jsxs("div", {
+                    className: "min-w-0 flex-1",
+                    children: [jsxs("div", {
+                      className: "mb-1 flex items-baseline gap-2",
+                      children: [jsx("span", {
+                        className: "text-sm font-semibold text-foreground",
+                        children: assistantName
+                      }), jsx("span", {
+                        className: "text-[11px] text-muted-foreground",
+                        children: new Date(msg.timestamp).toLocaleTimeString([], {
+                          hour: '2-digit',
+                          minute: '2-digit'
+                        })
+                      })]
+                    }), jsx(Markdown, {
+                      children: msg.content
+                    }), jsx(AssistantMessageActions, {
+                      messageId: msg.id,
+                      content: msg.content,
+                      onRegenerate: regenerateAssistantMessage ? id => void regenerateAssistantMessage(id) : undefined
+                    })]
+                  })]
+                })
+              })
+            }, msg.id)), streamingAssistantVisible ? jsx("div", {
+              className: "flex w-full justify-start",
+              children: jsx("div", {
+                className: "w-full min-w-0 max-w-full rounded-xl border border-border/60 bg-muted/70 px-3 py-2 text-sm shadow-sm",
+                children: jsxs("div", {
+                  className: "flex w-full gap-3",
+                  children: [jsx(AssistantAvatar, {
+                    avatarSrc: character?.avatarSrc ?? null,
+                    index: sortedAsc.length + 1,
+                    characterFileName: character?.fileName ?? null,
+                    text: response
+                  }), jsxs("div", {
+                    className: "min-w-0 flex-1",
+                    children: [jsxs("div", {
+                      className: "mb-1 flex items-baseline gap-2",
+                      children: [jsx("span", {
+                        className: "text-sm font-semibold text-foreground",
+                        children: assistantName
+                      }), isLoading && !response ? jsx(Loader2, {
+                        className: "h-3.5 w-3.5 animate-spin text-muted-foreground"
+                      }) : null]
+                    }), response ? jsx(Markdown, {
+                      children: response
+                    }) : isLoading ? jsx("p", {
+                      className: "text-sm text-muted-foreground",
+                      children: "Generating response\u2026"
+                    }) : null, response ? jsx(AssistantMessageActions, {
+                      messageId: "streaming",
+                      content: response,
+                      visibility: {
+                        regenerate: false
+                      }
+                    }) : null]
+                  })]
+                })
+              })
+            }) : null, jsx("div", {
+              ref: conversationEndRef,
+              className: "h-0 w-full shrink-0",
+              "aria-hidden": true
+            })]
+          })
+        })]
+      }), jsx(PopoverTrigger, {
+        asChild: true,
+        children: jsxs(AIToolbarInputSurface, {
+          className: "relative select-none",
+          children: [jsx(Input$1, {
+            ref: inputRef,
+            placeholder: "Ask me anything...",
+            value: input,
+            onChange: e => setInput(e.target.value),
+            onKeyPress: handleKeyPress,
+            onPaste: handlePaste,
+            disabled: isLoading || isHidden,
+            className: cn('h-9 flex-1 border-0 bg-transparent shadow-none outline-none ring-0 ring-offset-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 dark:bg-transparent', currentConversationId && conversationHistory.length > 0 ? 'pr-14' : isLoading ? 'pr-10' : isHidden ? 'pr-2' : 'pr-10')
+          }), currentConversationId && conversationHistory.length > 0 && !isLoading ? jsx("div", {
+            className: "absolute right-1 top-1/2 flex -translate-y-1/2 select-none items-center gap-1",
+            children: jsx(MessageHistory, {
+              conversationHistory: conversationHistory,
+              currentConversationId: currentConversationId,
+              onStartNewConversation: startNewConversation,
+              messageHistoryOpen: messageHistoryOpen,
+              setMessageHistoryOpen: setMessageHistoryOpen
+            })
+          }) : null, isLoading ? jsx("div", {
+            className: "absolute right-3 top-1/2 -translate-y-1/2 animate-pulse",
+            children: jsx(Loader2, {
+              className: "h-4 w-4 animate-spin text-muted-foreground"
+            })
+          }) : null]
+        })
+      })]
+    })
+  });
+};export{Input};//# sourceMappingURL=Input.js.map

package/lib/components/AIToolbar/components/completion/Input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/components/AIToolbar/components/completion/MessageHistory.d.ts

@@ -0,0 +1,11 @@
+import type { ChatMessage } from '../types';
+interface MessageHistoryProps {
+    conversationHistory: ChatMessage[];
+    currentConversationId: string | null;
+    onStartNewConversation: () => void;
+    messageHistoryOpen: boolean;
+    setMessageHistoryOpen: (open: boolean) => void;
+}
+export declare const MessageHistory: ({ conversationHistory, onStartNewConversation, messageHistoryOpen, setMessageHistoryOpen, }: MessageHistoryProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=MessageHistory.d.ts.map

package/lib/components/AIToolbar/components/completion/MessageHistory.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageHistory.d.ts","sourceRoot":"","sources":["../../../../../src/components/AIToolbar/components/completion/MessageHistory.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAM5C,UAAU,mBAAmB;IACzB,mBAAmB,EAAE,WAAW,EAAE,CAAC;IACnC,qBAAqB,EAAE,MAAM,GAAG,IAAI,CAAC;IACrC,sBAAsB,EAAE,MAAM,IAAI,CAAC;IACnC,kBAAkB,EAAE,OAAO,CAAC;IAC5B,qBAAqB,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CAClD;AAED,eAAO,MAAM,cAAc,GAAI,6FAK5B,mBAAmB,4CAyIrB,CAAC"}

package/lib/components/AIToolbar/components/completion/MessageHistory.js

@@ -0,0 +1,131 @@
+import {jsxs,jsx,Fragment}from'react/jsx-runtime';import {MessageSquareText,ChevronUp,ChevronDown}from'lucide-react';import'../../../../shardui/accordion.js';import'../../../../shardui/alert.js';import'../../../../shardui/alert-dialog.js';import'@radix-ui/react-aspect-ratio';import'../../../../shardui/avatar.js';import'../../../../shardui/badge.js';import'../../../../shardui/breadcrumb.js';import {Button}from'../../../../shardui/button.js';import'../../../../shardui/calendar.js';import'../../../../shardui/card.js';import'../../../../shardui/carousel.js';import'../../../../shardui/chart.js';import'../../../../shardui/checkbox.js';import'@radix-ui/react-collapsible';import'../../../../shardui/command.js';import'../../../../shardui/context-menu.js';import'../../../../shardui/dialog.js';import'../../../../shardui/drawer.js';import'../../../../shardui/dropdown-menu.js';import'../../../../shardui/form.js';import'../../../../shardui/hover-card.js';import'../../../../shardui/input.js';import'../../../../shardui/input-otp.js';import'../../../../shardui/label.js';import'../../../../shardui/menubar.js';import'../../../../shardui/navigation-menu.js';import'../../../../shardui/pagination.js';import {Popover,PopoverTrigger,PopoverContent}from'../../../../shardui/popover.js';import'../../../../shardui/progress.js';import'../../../../shardui/radio-group.js';import'react-resizable-panels';import'../../../../utils/isBrowser/index.js';import'clsx';import'tailwind-merge';import'react';import'fast-deep-equal/react.js';import {ScrollArea}from'../../../../shardui/scroll-area.js';import'../../../../shardui/select.js';import'../../../../shardui/separator.js';import'../../../../shardui/sheet.js';import'../../../../shardui/sidebar.js';import'../../../../shardui/slider.js';import'../../../ThemeProvider/ThemeProvider.js';import'sonner';import'../../../../shardui/switch.js';import'../../../../shardui/table.js';import'../../../../shardui/tabs.js';import'../../../../shardui/textarea.js';import'../../../../shardui/toast.js';import'../../../../shardui/toggle.js';import'../../../../shardui/toggle-group.js';import'../../../../shardui/tooltip.js';import {Markdown}from'../Markdown/index.js';import {useActiveCharacter}from'../../hooks/useActiveCharacter.js';import {useChatBackgroundImage}from'../../hooks/useChatBackgroundImage.js';import {AssistantAvatar}from'./AssistantAvatar.js';const MessageHistory = ({
+  conversationHistory,
+  onStartNewConversation,
+  messageHistoryOpen,
+  setMessageHistoryOpen
+}) => {
+  const character = useActiveCharacter();
+  const assistantName = character?.name ?? 'AI';
+  const chatBgImage = useChatBackgroundImage();
+  return jsxs(Popover, {
+    open: messageHistoryOpen,
+    onOpenChange: setMessageHistoryOpen,
+    children: [jsx(PopoverTrigger, {
+      asChild: true,
+      children: jsxs(Button, {
+        size: "icon",
+        variant: "outline",
+        "aria-label": "View Current Conversation",
+        className: "relative cursor-pointer w-12 h-7 px-2 bg-transparent flex gap-1 items-center justify-center",
+        children: [jsx("div", {
+          className: "flex items-center justify-center text-xs font-medium",
+          children: conversationHistory.length
+        }), jsx(MessageSquareText, {
+          className: "h-5 w-5"
+        })]
+      })
+    }), jsxs(PopoverContent, {
+      align: "end",
+      side: "bottom",
+      className: `relative z-[200] select-none w-screen max-h-[min(90vh,calc(100vh-1rem))] p-0 mt-3 border overflow-hidden border-input/50 ${chatBgImage ? 'bg-popover/70' : ''}`,
+      children: [chatBgImage ? jsxs(Fragment, {
+        children: [jsx("div", {
+          "aria-hidden": true,
+          className: "pointer-events-none absolute inset-0 bg-cover bg-center",
+          style: {
+            backgroundImage: `url(${chatBgImage})`
+          }
+        }), jsx("div", {
+          "aria-hidden": true,
+          className: "pointer-events-none absolute inset-0 bg-background/30 backdrop-blur-[2px]"
+        })]
+      }) : null, jsx("div", {
+        className: "relative z-10 border-b border-input/50 p-4",
+        children: jsxs("div", {
+          className: "flex items-center justify-between",
+          children: [jsxs("div", {
+            className: "flex items-center flex-col",
+            children: [jsx("h2", {
+              className: "text-lg font-bold bg-gradient-to-r from-primary to-primary/70 bg-clip-text text-transparent",
+              children: "Current Conversation"
+            }), jsxs("p", {
+              className: "text-xs text-muted-foreground",
+              children: [conversationHistory.length, " messages in this conversation"]
+            })]
+          }), jsxs("div", {
+            className: "flex items-center gap-2",
+            children: [jsx(Button, {
+              size: "sm",
+              onClick: () => {
+                onStartNewConversation();
+                setMessageHistoryOpen(false);
+              },
+              className: "text-xs",
+              children: "New Chat"
+            }), jsx(Button, {
+              size: "sm",
+              variant: "ghost",
+              onClick: () => setMessageHistoryOpen(false),
+              className: "text-xs",
+              children: messageHistoryOpen ? jsx(ChevronUp, {
+                className: "h-4 w-4"
+              }) : jsx(ChevronDown, {
+                className: "h-4 w-4"
+              })
+            })]
+          })]
+        })
+      }), jsx(ScrollArea, {
+        className: "relative z-10 h-[calc(100vh-10rem)]",
+        children: jsx("div", {
+          className: "p-4 space-y-4",
+          children: conversationHistory.sort((a, b) => b?.timestamp - a?.timestamp).map((message, descIdx, arr) => jsx("div", {
+            className: `p-3 rounded-lg ${message.role === 'user' ? 'bg-primary/10 border-l-4 border-primary' : 'bg-muted/50'}`,
+            children: message.role === 'user' ? jsxs(Fragment, {
+              children: [jsxs("div", {
+                className: "mb-2 flex items-center gap-2",
+                children: [jsx("span", {
+                  className: "text-xs font-medium uppercase text-muted-foreground",
+                  children: "You"
+                }), jsx("span", {
+                  className: "text-xs text-muted-foreground",
+                  children: new Date(message.timestamp).toLocaleTimeString([], {
+                    hour: '2-digit',
+                    minute: '2-digit'
+                  })
+                })]
+              }), jsx(Markdown, {
+                children: message.content
+              })]
+            }) : jsxs("div", {
+              className: "flex w-full gap-3",
+              children: [jsx(AssistantAvatar, {
+                avatarSrc: character?.avatarSrc ?? null,
+                index: arr.length - descIdx,
+                characterFileName: character?.fileName ?? null,
+                text: message.content
+              }), jsxs("div", {
+                className: "min-w-0 flex-1",
+                children: [jsxs("div", {
+                  className: "mb-1 flex items-baseline gap-2",
+                  children: [jsx("span", {
+                    className: "text-sm font-semibold text-foreground",
+                    children: assistantName
+                  }), jsx("span", {
+                    className: "text-xs text-muted-foreground",
+                    children: new Date(message.timestamp).toLocaleTimeString([], {
+                      hour: '2-digit',
+                      minute: '2-digit'
+                    })
+                  })]
+                }), jsx(Markdown, {
+                  children: message.content
+                })]
+              })]
+            })
+          }, message.id))
+        })
+      })]
+    })]
+  });
+};export{MessageHistory};//# sourceMappingURL=MessageHistory.js.map

package/lib/components/AIToolbar/components/completion/MessageHistory.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageHistory.js","sources":["../../../../../src/components/AIToolbar/components/completion/MessageHistory.tsx"],"sourcesContent":[null],"names":[],"mappings":"i1EAcC,MAAA,cAAA,GAAA,CAAA;AAED,EAAA,mBAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/components/AIToolbar/components/completion/Screenshot.d.ts

@@ -0,0 +1,7 @@
+import { UseCompletionReturn } from '../types';
+export declare const Screenshot: ({ screenshotConfiguration, attachedFiles, isLoading, captureScreenshot, isScreenshotLoading, supportsImages, maxFiles, toolbarShowElementTitles, }: UseCompletionReturn & {
+    supportsImages?: boolean;
+    maxFiles?: number;
+    toolbarShowElementTitles?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Screenshot.d.ts.map

package/lib/components/AIToolbar/components/completion/Screenshot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Screenshot.d.ts","sourceRoot":"","sources":["../../../../../src/components/AIToolbar/components/completion/Screenshot.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAI/C,eAAO,MAAM,UAAU,GAAI,oJASxB,mBAAmB,GAAG;IAAE,cAAc,CAAC,EAAE,OAAO,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAAC,wBAAwB,CAAC,EAAE,OAAO,CAAA;CAAE,4CA8B3G,CAAC"}