@gmickel/gno 0.7.0 → 0.8.1

package/src/serve/public/components/ai-elements/prompt-input.tsx

@@ -1,4 +1,5 @@
-import type { ChatStatus, FileUIPart } from 'ai';
+import type { ChatStatus, FileUIPart } from "ai";
+
 import {
   CornerDownLeftIcon,
   ImageIcon,
@@ -8,8 +9,8 @@ import {
   PlusIcon,
   SquareIcon,
   XIcon,
-} from 'lucide-react';
-import { nanoid } from 'nanoid';
+} from "lucide-react";
+import { nanoid } from "nanoid";
 import {
   type ChangeEvent,
   type ChangeEventHandler,
@@ -31,9 +32,10 @@ import {
   useMemo,
   useRef,
   useState,
-} from 'react';
-import { cn } from '../../lib/utils';
-import { Button } from '../ui/button';
+} from "react";
+
+import { cn } from "../../lib/utils";
+import { Button } from "../ui/button";
 import {
   Command,
   CommandEmpty,
@@ -42,31 +44,31 @@ import {
   CommandItem,
   CommandList,
   CommandSeparator,
-} from '../ui/command';
+} from "../ui/command";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from '../ui/dropdown-menu';
+} from "../ui/dropdown-menu";
 import {
   HoverCard,
   HoverCardContent,
   HoverCardTrigger,
-} from '../ui/hover-card';
+} from "../ui/hover-card";
 import {
   InputGroup,
   InputGroupAddon,
   InputGroupButton,
   InputGroupTextarea,
-} from '../ui/input-group';
+} from "../ui/input-group";
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from '../ui/select';
+} from "../ui/select";
 
 // ============================================================================
 // Provider Context & Types
@@ -108,7 +110,7 @@ export const usePromptInputController = () => {
   const ctx = useContext(PromptInputController);
   if (!ctx) {
     throw new Error(
-      'Wrap your component inside <PromptInputProvider> to use usePromptInputController().'
+      "Wrap your component inside <PromptInputProvider> to use usePromptInputController()."
     );
   }
   return ctx;
@@ -122,7 +124,7 @@ export const useProviderAttachments = () => {
   const ctx = useContext(ProviderAttachmentsContext);
   if (!ctx) {
     throw new Error(
-      'Wrap your component inside <PromptInputProvider> to use useProviderAttachments().'
+      "Wrap your component inside <PromptInputProvider> to use useProviderAttachments()."
     );
   }
   return ctx;
@@ -140,12 +142,12 @@ export type PromptInputProviderProps = PropsWithChildren<{
  * If you don't use it, PromptInput stays fully self-managed.
  */
 export function PromptInputProvider({
-  initialInput: initialTextInput = '',
+  initialInput: initialTextInput = "",
   children,
 }: PromptInputProviderProps) {
   // ----- textInput state
   const [textInput, setTextInput] = useState(initialTextInput);
-  const clearInput = useCallback(() => setTextInput(''), []);
+  const clearInput = useCallback(() => setTextInput(""), []);
 
   // ----- attachments state (global when wrapped)
   const [attachmentFiles, setAttachmentFiles] = useState<
@@ -164,7 +166,7 @@ export function PromptInputProvider({
       prev.concat(
         incoming.map((file) => ({
           id: nanoid(),
-          type: 'file' as const,
+          type: "file" as const,
           url: URL.createObjectURL(file),
           mediaType: file.type,
           filename: file.name,
@@ -268,7 +270,7 @@ export const usePromptInputAttachments = () => {
   const context = provider ?? local;
   if (!context) {
     throw new Error(
-      'usePromptInputAttachments must be used within a PromptInput or PromptInputProvider'
+      "usePromptInputAttachments must be used within a PromptInput or PromptInputProvider"
     );
   }
   return context;
@@ -286,20 +288,20 @@ export function PromptInputAttachment({
 }: PromptInputAttachmentProps) {
   const attachments = usePromptInputAttachments();
 
-  const filename = data.filename || '';
+  const filename = data.filename || "";
 
   const mediaType =
-    data.mediaType?.startsWith('image/') && data.url ? 'image' : 'file';
-  const isImage = mediaType === 'image';
+    data.mediaType?.startsWith("image/") && data.url ? "image" : "file";
+  const isImage = mediaType === "image";
 
-  const attachmentLabel = filename || (isImage ? 'Image' : 'Attachment');
+  const attachmentLabel = filename || (isImage ? "Image" : "Attachment");
 
   return (
     <PromptInputHoverCard>
       <HoverCardTrigger asChild>
         <div
           className={cn(
-            'group relative flex h-8 cursor-pointer select-none items-center gap-1.5 rounded-md border border-border px-1.5 font-medium text-sm transition-all hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+            "group relative flex h-8 cursor-pointer select-none items-center gap-1.5 rounded-md border border-border px-1.5 font-medium text-sm transition-all hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
             className
           )}
           key={data.id}
@@ -309,7 +311,7 @@ export function PromptInputAttachment({
             <div className="absolute inset-0 flex size-5 items-center justify-center overflow-hidden rounded bg-background transition-opacity group-hover:opacity-0">
               {isImage ? (
                 <img
-                  alt={filename || 'attachment'}
+                  alt={filename || "attachment"}
                   className="size-5 object-cover"
                   height={20}
                   src={data.url}
@@ -344,7 +346,7 @@ export function PromptInputAttachment({
           {isImage && (
             <div className="flex max-h-96 w-96 items-center justify-center overflow-hidden rounded-md border">
               <img
-                alt={filename || 'attachment preview'}
+                alt={filename || "attachment preview"}
                 className="max-h-full max-w-full object-contain"
                 height={384}
                 src={data.url}
@@ -355,7 +357,7 @@ export function PromptInputAttachment({
           <div className="flex items-center gap-2.5">
             <div className="min-w-0 flex-1 space-y-1 px-0.5">
               <h4 className="truncate font-semibold text-sm leading-none">
-                {filename || (isImage ? 'Image' : 'Attachment')}
+                {filename || (isImage ? "Image" : "Attachment")}
               </h4>
               {data.mediaType && (
                 <p className="truncate font-mono text-muted-foreground text-xs">
@@ -372,7 +374,7 @@ export function PromptInputAttachment({
 
 export type PromptInputAttachmentsProps = Omit<
   HTMLAttributes<HTMLDivElement>,
-  'children'
+  "children"
 > & {
   children: (attachment: FileUIPart & { id: string }) => ReactNode;
 };
@@ -390,7 +392,7 @@ export function PromptInputAttachments({
 
   return (
     <div
-      className={cn('flex w-full flex-wrap items-center gap-2 p-3', className)}
+      className={cn("flex w-full flex-wrap items-center gap-2 p-3", className)}
       {...props}
     >
       {attachments.files.map((file) => (
@@ -407,7 +409,7 @@ export type PromptInputActionAddAttachmentsProps = ComponentProps<
 };
 
 export const PromptInputActionAddAttachments = ({
-  label = 'Add photos or files',
+  label = "Add photos or files",
   ...props
 }: PromptInputActionAddAttachmentsProps) => {
   const attachments = usePromptInputAttachments();
@@ -432,7 +434,7 @@ export interface PromptInputMessage {
 
 export type PromptInputProps = Omit<
   HTMLAttributes<HTMLFormElement>,
-  'onSubmit' | 'onError'
+  "onSubmit" | "onError"
 > & {
   accept?: string; // e.g., "image/*" or leave undefined for any
   multiple?: boolean;
@@ -444,7 +446,7 @@ export type PromptInputProps = Omit<
   maxFiles?: number;
   maxFileSize?: number; // bytes
   onError?: (err: {
-    code: 'max_files' | 'max_file_size' | 'accept';
+    code: "max_files" | "max_file_size" | "accept";
     message: string;
   }) => void;
   onSubmit: (
@@ -488,17 +490,17 @@ export const PromptInput = ({
 
   const matchesAccept = useCallback(
     (f: File) => {
-      if (!accept || accept.trim() === '') {
+      if (!accept || accept.trim() === "") {
         return true;
       }
 
       const patterns = accept
-        .split(',')
+        .split(",")
         .map((s) => s.trim())
         .filter(Boolean);
 
       return patterns.some((pattern) => {
-        if (pattern.endsWith('/*')) {
+        if (pattern.endsWith("/*")) {
           const prefix = pattern.slice(0, -1); // e.g: image/* -> image/
           return f.type.startsWith(prefix);
         }
@@ -514,8 +516,8 @@ export const PromptInput = ({
       const accepted = incoming.filter((f) => matchesAccept(f));
       if (incoming.length && accepted.length === 0) {
         onError?.({
-          code: 'accept',
-          message: 'No files match the accepted types.',
+          code: "accept",
+          message: "No files match the accepted types.",
         });
         return;
       }
@@ -524,30 +526,30 @@ export const PromptInput = ({
       const sized = accepted.filter(withinSize);
       if (accepted.length > 0 && sized.length === 0) {
         onError?.({
-          code: 'max_file_size',
-          message: 'All files exceed the maximum size.',
+          code: "max_file_size",
+          message: "All files exceed the maximum size.",
         });
         return;
       }
 
       setItems((prev) => {
         const capacity =
-          typeof maxFiles === 'number'
+          typeof maxFiles === "number"
             ? Math.max(0, maxFiles - prev.length)
             : undefined;
         const capped =
-          typeof capacity === 'number' ? sized.slice(0, capacity) : sized;
-        if (typeof capacity === 'number' && sized.length > capacity) {
+          typeof capacity === "number" ? sized.slice(0, capacity) : sized;
+        if (typeof capacity === "number" && sized.length > capacity) {
           onError?.({
-            code: 'max_files',
-            message: 'Too many files. Some were not added.',
+            code: "max_files",
+            message: "Too many files. Some were not added.",
           });
         }
         const next: (FileUIPart & { id: string })[] = [];
         for (const file of capped) {
           next.push({
             id: nanoid(),
-            type: 'file',
+            type: "file",
             url: URL.createObjectURL(file),
             mediaType: file.type,
             filename: file.name,
@@ -603,7 +605,7 @@ export const PromptInput = ({
   // The syncHiddenInput prop is no longer functional
   useEffect(() => {
     if (syncHiddenInput && inputRef.current && files.length === 0) {
-      inputRef.current.value = '';
+      inputRef.current.value = "";
     }
   }, [files, syncHiddenInput]);
 
@@ -618,23 +620,23 @@ export const PromptInput = ({
     }
 
     const onDragOver = (e: DragEvent) => {
-      if (e.dataTransfer?.types?.includes('Files')) {
+      if (e.dataTransfer?.types?.includes("Files")) {
         e.preventDefault();
       }
     };
     const onDrop = (e: DragEvent) => {
-      if (e.dataTransfer?.types?.includes('Files')) {
+      if (e.dataTransfer?.types?.includes("Files")) {
         e.preventDefault();
       }
       if (e.dataTransfer?.files && e.dataTransfer.files.length > 0) {
         add(e.dataTransfer.files);
       }
     };
-    form.addEventListener('dragover', onDragOver);
-    form.addEventListener('drop', onDrop);
+    form.addEventListener("dragover", onDragOver);
+    form.addEventListener("drop", onDrop);
     return () => {
-      form.removeEventListener('dragover', onDragOver);
-      form.removeEventListener('drop', onDrop);
+      form.removeEventListener("dragover", onDragOver);
+      form.removeEventListener("drop", onDrop);
     };
   }, [add, globalDrop]);
 
@@ -644,23 +646,23 @@ export const PromptInput = ({
     }
 
     const onDragOver = (e: DragEvent) => {
-      if (e.dataTransfer?.types?.includes('Files')) {
+      if (e.dataTransfer?.types?.includes("Files")) {
         e.preventDefault();
       }
     };
     const onDrop = (e: DragEvent) => {
-      if (e.dataTransfer?.types?.includes('Files')) {
+      if (e.dataTransfer?.types?.includes("Files")) {
         e.preventDefault();
       }
       if (e.dataTransfer?.files && e.dataTransfer.files.length > 0) {
         add(e.dataTransfer.files);
       }
     };
-    document.addEventListener('dragover', onDragOver);
-    document.addEventListener('drop', onDrop);
+    document.addEventListener("dragover", onDragOver);
+    document.addEventListener("drop", onDrop);
     return () => {
-      document.removeEventListener('dragover', onDragOver);
-      document.removeEventListener('drop', onDrop);
+      document.removeEventListener("dragover", onDragOver);
+      document.removeEventListener("drop", onDrop);
     };
   }, [add, globalDrop]);
 
@@ -683,7 +685,7 @@ export const PromptInput = ({
       add(event.currentTarget.files);
     }
     // Reset input value to allow selecting files that were previously removed
-    event.currentTarget.value = '';
+    event.currentTarget.value = "";
   };
 
   const convertBlobUrlToDataUrl = async (
@@ -723,7 +725,7 @@ export const PromptInput = ({
       ? controller.textInput.value
       : (() => {
           const formData = new FormData(form);
-          return (formData.get('message') as string) || '';
+          return (formData.get("message") as string) || "";
         })();
 
     // Reset form immediately after capturing text to avoid race condition
@@ -735,7 +737,7 @@ export const PromptInput = ({
     // Convert blob URLs to data URLs asynchronously
     Promise.all(
       files.map(async ({ id, ...item }) => {
-        if (item.url?.startsWith('blob:')) {
+        if (item.url?.startsWith("blob:")) {
           const dataUrl = await convertBlobUrlToDataUrl(item.url);
           // If conversion failed, keep the original blob URL
           return {
@@ -792,7 +794,7 @@ export const PromptInput = ({
         type="file"
       />
       <form
-        className={cn('w-full', className)}
+        className={cn("w-full", className)}
         onSubmit={handleSubmit}
         ref={formRef}
         {...props}
@@ -817,7 +819,7 @@ export const PromptInputBody = ({
   className,
   ...props
 }: PromptInputBodyProps) => (
-  <div className={cn('contents', className)} {...props} />
+  <div className={cn("contents", className)} {...props} />
 );
 
 export type PromptInputTextareaProps = ComponentProps<
@@ -827,7 +829,7 @@ export type PromptInputTextareaProps = ComponentProps<
 export const PromptInputTextarea = ({
   onChange,
   className,
-  placeholder = 'What would you like to know?',
+  placeholder = "What would you like to know?",
   ...props
 }: PromptInputTextareaProps) => {
   const controller = useOptionalPromptInputController();
@@ -835,7 +837,7 @@ export const PromptInputTextarea = ({
   const [isComposing, setIsComposing] = useState(false);
 
   const handleKeyDown: KeyboardEventHandler<HTMLTextAreaElement> = (e) => {
-    if (e.key === 'Enter') {
+    if (e.key === "Enter") {
       if (isComposing || e.nativeEvent.isComposing) {
         return;
       }
@@ -858,8 +860,8 @@ export const PromptInputTextarea = ({
 
     // Remove last attachment when Backspace is pressed and textarea is empty
     if (
-      e.key === 'Backspace' &&
-      e.currentTarget.value === '' &&
+      e.key === "Backspace" &&
+      e.currentTarget.value === "" &&
       attachments.files.length > 0
     ) {
       e.preventDefault();
@@ -880,7 +882,7 @@ export const PromptInputTextarea = ({
     const files: File[] = [];
 
     for (const item of items) {
-      if (item.kind === 'file') {
+      if (item.kind === "file") {
         const file = item.getAsFile();
         if (file) {
           files.push(file);
@@ -908,7 +910,7 @@ export const PromptInputTextarea = ({
 
   return (
     <InputGroupTextarea
-      className={cn('field-sizing-content max-h-48 min-h-16', className)}
+      className={cn("field-sizing-content max-h-48 min-h-16", className)}
       name="message"
       onCompositionEnd={() => setIsComposing(false)}
       onCompositionStart={() => setIsComposing(true)}
@@ -923,7 +925,7 @@ export const PromptInputTextarea = ({
 
 export type PromptInputHeaderProps = Omit<
   ComponentProps<typeof InputGroupAddon>,
-  'align'
+  "align"
 >;
 
 export const PromptInputHeader = ({
@@ -932,14 +934,14 @@ export const PromptInputHeader = ({
 }: PromptInputHeaderProps) => (
   <InputGroupAddon
     align="block-end"
-    className={cn('order-first flex-wrap gap-1', className)}
+    className={cn("order-first flex-wrap gap-1", className)}
     {...props}
   />
 );
 
 export type PromptInputFooterProps = Omit<
   ComponentProps<typeof InputGroupAddon>,
-  'align'
+  "align"
 >;
 
 export const PromptInputFooter = ({
@@ -948,7 +950,7 @@ export const PromptInputFooter = ({
 }: PromptInputFooterProps) => (
   <InputGroupAddon
     align="block-end"
-    className={cn('justify-between gap-1', className)}
+    className={cn("justify-between gap-1", className)}
     {...props}
   />
 );
@@ -959,19 +961,19 @@ export const PromptInputTools = ({
   className,
   ...props
 }: PromptInputToolsProps) => (
-  <div className={cn('flex items-center gap-1', className)} {...props} />
+  <div className={cn("flex items-center gap-1", className)} {...props} />
 );
 
 export type PromptInputButtonProps = ComponentProps<typeof InputGroupButton>;
 
 export const PromptInputButton = ({
-  variant = 'ghost',
+  variant = "ghost",
   className,
   size,
   ...props
 }: PromptInputButtonProps) => {
   const newSize =
-    size ?? (Children.count(props.children) > 1 ? 'sm' : 'icon-sm');
+    size ?? (Children.count(props.children) > 1 ? "sm" : "icon-sm");
 
   return (
     <InputGroupButton
@@ -1032,19 +1034,19 @@ export type PromptInputSubmitProps = ComponentProps<typeof InputGroupButton> & {
 
 export const PromptInputSubmit = ({
   className,
-  variant = 'default',
-  size = 'icon-sm',
+  variant = "default",
+  size = "icon-sm",
   status,
   children,
   ...props
 }: PromptInputSubmitProps) => {
   let Icon = <CornerDownLeftIcon className="size-4" />;
 
-  if (status === 'submitted') {
+  if (status === "submitted") {
     Icon = <Loader2Icon className="size-4 animate-spin" />;
-  } else if (status === 'streaming') {
+  } else if (status === "streaming") {
     Icon = <SquareIcon className="size-4" />;
-  } else if (status === 'error') {
+  } else if (status === "error") {
     Icon = <XIcon className="size-4" />;
   }
 
@@ -1137,8 +1139,8 @@ export const PromptInputSpeechButton = ({
 
   useEffect(() => {
     if (
-      typeof window !== 'undefined' &&
-      ('SpeechRecognition' in window || 'webkitSpeechRecognition' in window)
+      typeof window !== "undefined" &&
+      ("SpeechRecognition" in window || "webkitSpeechRecognition" in window)
     ) {
       const SpeechRecognition =
         window.SpeechRecognition || window.webkitSpeechRecognition;
@@ -1146,7 +1148,7 @@ export const PromptInputSpeechButton = ({
 
       speechRecognition.continuous = true;
       speechRecognition.interimResults = true;
-      speechRecognition.lang = 'en-US';
+      speechRecognition.lang = "en-US";
 
       speechRecognition.onstart = () => {
         setIsListening(true);
@@ -1157,12 +1159,12 @@ export const PromptInputSpeechButton = ({
       };
 
       speechRecognition.onresult = (event) => {
-        let finalTranscript = '';
+        let finalTranscript = "";
 
         for (let i = event.resultIndex; i < event.results.length; i++) {
           const result = event.results[i];
           if (result.isFinal) {
-            finalTranscript += result[0]?.transcript ?? '';
+            finalTranscript += result[0]?.transcript ?? "";
           }
         }
 
@@ -1170,16 +1172,16 @@ export const PromptInputSpeechButton = ({
           const textarea = textareaRef.current;
           const currentValue = textarea.value;
           const newValue =
-            currentValue + (currentValue ? ' ' : '') + finalTranscript;
+            currentValue + (currentValue ? " " : "") + finalTranscript;
 
           textarea.value = newValue;
-          textarea.dispatchEvent(new Event('input', { bubbles: true }));
+          textarea.dispatchEvent(new Event("input", { bubbles: true }));
           onTranscriptionChange?.(newValue);
         }
       };
 
       speechRecognition.onerror = (event) => {
-        console.error('Speech recognition error:', event.error);
+        console.error("Speech recognition error:", event.error);
         setIsListening(false);
       };
 
@@ -1209,8 +1211,8 @@ export const PromptInputSpeechButton = ({
   return (
     <PromptInputButton
       className={cn(
-        'relative transition-all duration-200',
-        isListening && 'animate-pulse bg-accent text-accent-foreground',
+        "relative transition-all duration-200",
+        isListening && "animate-pulse bg-accent text-accent-foreground",
         className
       )}
       disabled={!recognition}
@@ -1238,8 +1240,8 @@ export const PromptInputSelectTrigger = ({
 }: PromptInputSelectTriggerProps) => (
   <SelectTrigger
     className={cn(
-      'border-none bg-transparent font-medium text-muted-foreground shadow-none transition-colors',
-      'hover:bg-accent hover:text-foreground aria-expanded:bg-accent aria-expanded:text-foreground',
+      "border-none bg-transparent font-medium text-muted-foreground shadow-none transition-colors",
+      "hover:bg-accent hover:text-foreground aria-expanded:bg-accent aria-expanded:text-foreground",
       className
     )}
     {...props}
@@ -1298,7 +1300,7 @@ export type PromptInputHoverCardContentProps = ComponentProps<
 >;
 
 export const PromptInputHoverCardContent = ({
-  align = 'start',
+  align = "start",
   ...props
 }: PromptInputHoverCardContentProps) => (
   <HoverCardContent align={align} {...props} />
@@ -1326,7 +1328,7 @@ export const PromptInputTabLabel = ({
 }: PromptInputTabLabelProps) => (
   <h3
     className={cn(
-      'mb-2 px-3 font-medium text-muted-foreground text-xs',
+      "mb-2 px-3 font-medium text-muted-foreground text-xs",
       className
     )}
     {...props}
@@ -1339,7 +1341,7 @@ export const PromptInputTabBody = ({
   className,
   ...props
 }: PromptInputTabBodyProps) => (
-  <div className={cn('space-y-1', className)} {...props} />
+  <div className={cn("space-y-1", className)} {...props} />
 );
 
 export type PromptInputTabItemProps = HTMLAttributes<HTMLDivElement>;
@@ -1350,7 +1352,7 @@ export const PromptInputTabItem = ({
 }: PromptInputTabItemProps) => (
   <div
     className={cn(
-      'flex items-center gap-2 px-3 py-2 text-xs hover:bg-accent',
+      "flex items-center gap-2 px-3 py-2 text-xs hover:bg-accent",
       className
     )}
     {...props}