@brainfish-ai/components 0.35.20 → 0.36.1

package/dist/esm/components/chat-search/hooks/useFileAttachment.js

@@ -0,0 +1,105 @@
+import { useState, useCallback } from 'react';
+import { uploadFileToApi } from '../../../lib/api.js';
+
+const ALLOWED_CONTENT_TYPES = {
+  "image/jpeg": "image",
+  "image/png": "image",
+  "image/gif": "image",
+  "image/webp": "image"
+};
+const MAX_FILE_SIZE = 10 * 1024 * 1024;
+const MAX_FILE_COUNT = 5;
+let nextFileId = 0;
+const generateFileId = () => `file-${++nextFileId}`;
+function useFileAttachment({ uploadEndpoint, headers, getConversationId, onError }) {
+  const [attachedFiles, setAttachedFiles] = useState([]);
+  const removeFile = useCallback((id) => {
+    setAttachedFiles((prev) => {
+      const file = prev.find((f) => f.id === id);
+      if (file) URL.revokeObjectURL(file.preview);
+      return prev.filter((f) => f.id !== id);
+    });
+  }, []);
+  const addFiles = useCallback(
+    (files) => {
+      if (files.length === 0) return;
+      const validFiles = files.filter((file) => {
+        if (!ALLOWED_CONTENT_TYPES[file.type]) {
+          onError?.("Image type is not supported. Please use JPEG, PNG, GIF, or WebP.");
+          return false;
+        }
+        if (file.size > MAX_FILE_SIZE) {
+          onError?.(`Image "${file.name}" exceeds the 10MB size limit.`);
+          return false;
+        }
+        return true;
+      });
+      const remaining = MAX_FILE_COUNT - attachedFiles.length;
+      if (remaining === 0) {
+        onError?.("Maximum 5 images reached.");
+        return;
+      }
+      const filesToAdd = validFiles.slice(0, remaining);
+      if (filesToAdd.length === 0) {
+        return;
+      }
+      if (filesToAdd.length < validFiles.length) {
+        onError?.("Maximum 5 images. Some images were not attached.");
+      }
+      if (!uploadEndpoint) {
+        console.error("[useFileAttachment] uploadEndpoint is not configured — file attachment is unavailable.");
+        onError?.("Something went wrong. Please try again later.");
+        return;
+      }
+      const newFiles = filesToAdd.map((file) => ({
+        id: generateFileId(),
+        file,
+        preview: URL.createObjectURL(file),
+        status: "uploading",
+        attachmentType: ALLOWED_CONTENT_TYPES[file.type]
+      }));
+      setAttachedFiles((prev) => [...prev, ...newFiles]);
+      const conversationId = getConversationId();
+      newFiles.forEach((newFile) => {
+        void (async () => {
+          try {
+            const { publicUrl } = await uploadFileToApi({
+              endpoint: uploadEndpoint,
+              conversationId,
+              file: newFile.file,
+              headers
+            });
+            setAttachedFiles((prev) => prev.map((f) => f.id === newFile.id ? { ...f, status: "uploaded", publicUrl } : f));
+          } catch (error) {
+            console.error("Upload failed:", error);
+            onError?.(`Failed to upload "${newFile.file.name}". Please try again.`);
+            setAttachedFiles((prev) => {
+              const file = prev.find((f) => f.id === newFile.id);
+              if (file) URL.revokeObjectURL(file.preview);
+              return prev.filter((f) => f.id !== newFile.id);
+            });
+          }
+        })();
+      });
+    },
+    [attachedFiles, uploadEndpoint, headers, getConversationId, onError]
+  );
+  const clearAttachedFiles = useCallback(() => {
+    attachedFiles.forEach((f) => URL.revokeObjectURL(f.preview));
+    setAttachedFiles([]);
+  }, [attachedFiles]);
+  const getUploadedAttachments = useCallback(() => {
+    return attachedFiles.filter((f) => f.status === "uploaded" && f.publicUrl).map((f) => ({ type: f.attachmentType, url: f.publicUrl, filename: f.file.name }));
+  }, [attachedFiles]);
+  const isUploading = attachedFiles.some((f) => f.status === "uploading");
+  return {
+    attachedFiles,
+    isUploading,
+    addFiles,
+    removeFile,
+    clearAttachedFiles,
+    getUploadedAttachments
+  };
+}
+
+export { useFileAttachment };

package/dist/esm/components/chat-search/hooks/useIncludePage.js

@@ -0,0 +1,133 @@
+import { useState, useCallback, useEffect } from 'react';
+import { createConversationId } from '../../../lib/api.js';
+
+const useIncludePage = ({ isAgentAssist, apiKey, trackEvent }) => {
+  const [includePageEnabled, setIncludePageEnabled] = useState(false);
+  const [includePageLoading, setIncludePageLoading] = useState(false);
+  const [includePageDisabled, setIncludePageDisabled] = useState(false);
+  const sendMessageToParent = useCallback(
+    (message, timeout = 5e3) => {
+      return new Promise((resolve, reject) => {
+        const requestId = createConversationId();
+        let timeoutId;
+        const handler = (event) => {
+          if (event.data.requestId === requestId) {
+            clearTimeout(timeoutId);
+            window.removeEventListener("message", handler);
+            resolve(event.data);
+          }
+        };
+        timeoutId = setTimeout(() => {
+          window.removeEventListener("message", handler);
+          reject(new Error("Request timeout"));
+        }, timeout);
+        window.addEventListener("message", handler);
+        window.parent.postMessage({ ...message, requestId, widgetKey: apiKey }, "*");
+      });
+    },
+    [apiKey]
+  );
+  const handleIncludePageToggle = useCallback(
+    async (enabled) => {
+      setIncludePageLoading(true);
+      try {
+        if (enabled) {
+          const response = await sendMessageToParent({
+            type: "REQUEST_PAGE_PERMISSION"
+          });
+          if (!response.granted) {
+            trackEvent?.("Include Page Permission Denied", {});
+            throw new Error("Permission denied");
+          }
+          window.parent.postMessage(
+            {
+              type: "UPDATE_PAGE_TOGGLE_STATE",
+              enabled: true,
+              widgetKey: apiKey
+            },
+            "*"
+          );
+          trackEvent?.("Include Page Enabled", {});
+          setIncludePageEnabled(true);
+        } else {
+          window.parent.postMessage(
+            {
+              type: "UPDATE_PAGE_TOGGLE_STATE",
+              enabled: false,
+              widgetKey: apiKey
+            },
+            "*"
+          );
+          trackEvent?.("Include Page Disabled", {});
+          setIncludePageEnabled(false);
+        }
+      } catch (error) {
+        console.error("Failed to toggle include page:", error);
+        setIncludePageEnabled(false);
+      } finally {
+        setIncludePageLoading(false);
+      }
+    },
+    [apiKey, sendMessageToParent, trackEvent]
+  );
+  const fetchPageContext = useCallback(
+    async (conversationId, searchQuery) => {
+      if (!includePageEnabled || !isAgentAssist || includePageDisabled) {
+        return void 0;
+      }
+      try {
+        setIncludePageLoading(true);
+        const response = await sendMessageToParent(
+          {
+            type: "REQUEST_PAGE_CONTENT"
+          },
+          5e3
+        );
+        if (response.success && response.content) {
+          trackEvent?.("Page Content Included", {
+            conversationId,
+            searchQuery,
+            contentLength: response.content.length
+          });
+          return [
+            {
+              type: "text",
+              text: `I am currently viewing this web page:
+
+${response.content}`
+            }
+          ];
+        }
+        return void 0;
+      } catch (error) {
+        console.error("Failed to fetch page content:", error);
+        trackEvent?.("Page Content Fetch Failed", { conversationId, searchQuery });
+        return void 0;
+      } finally {
+        setIncludePageLoading(false);
+      }
+    },
+    [includePageEnabled, isAgentAssist, includePageDisabled, sendMessageToParent, trackEvent]
+  );
+  useEffect(() => {
+    if (!isAgentAssist) return;
+    const handleMessage = (event) => {
+      const data = event.data;
+      if (data.type === "INCLUDE_PAGE_STATE") {
+        setIncludePageEnabled(data.enabled || false);
+        setIncludePageDisabled(data.disabled || false);
+      }
+    };
+    window.addEventListener("message", handleMessage);
+    return () => window.removeEventListener("message", handleMessage);
+  }, [isAgentAssist]);
+  return {
+    includePageEnabled,
+    includePageLoading,
+    includePageDisabled,
+    handleIncludePageToggle,
+    fetchPageContext
+  };
+};
+
+export { useIncludePage };

package/dist/esm/components/chat-search/hooks/useIsChatSearchDirty.js

@@ -0,0 +1,9 @@
+import { useChatSearch } from '../ChatSearchContext.js';
+
+const useIsChatSearchDirty = () => {
+  const { showResults, answers } = useChatSearch();
+  const isDirty = Boolean(showResults || answers.length > 0);
+  return isDirty;
+};
+
+export { useIsChatSearchDirty };

package/dist/esm/components/chat-search/hooks/useScrollManager.js

@@ -0,0 +1,36 @@
+const useScrollManager = (answerRefs, containerRef, bottomRef) => {
+  const scrollToLastAnswer = () => {
+    requestAnimationFrame(() => {
+      const lastAnswer = answerRefs.current?.[answerRefs.current.length - 1];
+      const container = containerRef.current;
+      if (lastAnswer && container) {
+        const rect = lastAnswer.getBoundingClientRect();
+        const containerRect = container.getBoundingClientRect();
+        const targetScroll = container.scrollTop + (rect.top - containerRect.top) - 80;
+        container.scrollTo({ top: targetScroll, behavior: "smooth" });
+      }
+    });
+  };
+  const scrollToAnswer = (index) => {
+    requestAnimationFrame(() => {
+      const answer = answerRefs.current?.[index];
+      const container = containerRef.current;
+      if (answer && container) {
+        const rect = answer.getBoundingClientRect();
+        const containerRect = container.getBoundingClientRect();
+        const targetScroll = container.scrollTop + (rect.top - containerRect.top) - 80;
+        container.scrollTo({ top: targetScroll, behavior: "smooth" });
+      }
+    });
+  };
+  const scrollToBottom = () => {
+    setTimeout(() => {
+      if (bottomRef?.current && containerRef.current) {
+        bottomRef.current.scrollIntoView({ behavior: "smooth", block: "end" });
+      }
+    }, 200);
+  };
+  return { scrollToLastAnswer, scrollToAnswer, scrollToBottom };
+};
+
+export { useScrollManager };

package/dist/esm/components/chat-search/hooks/useSubscriptionManager.js

@@ -0,0 +1,31 @@
+import { useRef, useEffect } from 'react';
+import { useChatSearch } from '../ChatSearchContext.js';
+
+const useSubscriptionManager = () => {
+  const stateSubscribersRef = useRef([]);
+  const { showResults, answers, isLoadingConversation, loadError } = useChatSearch();
+  useEffect(() => {
+    const state = {
+      showResults,
+      answers,
+      isLoading: isLoadingConversation,
+      error: loadError
+    };
+    stateSubscribersRef.current.forEach((callback) => callback(state));
+  }, [showResults, answers, isLoadingConversation, loadError]);
+  const subscribeToStateChanges = (callback) => {
+    stateSubscribersRef.current.push(callback);
+    callback({
+      showResults,
+      answers,
+      isLoading: isLoadingConversation,
+      error: loadError
+    });
+    return () => {
+      stateSubscribersRef.current = stateSubscribersRef.current.filter((cb) => cb !== callback);
+    };
+  };
+  return { subscribeToStateChanges };
+};
+
+export { useSubscriptionManager };

package/dist/esm/components/chat-search/hooks/useToast.js

@@ -0,0 +1,22 @@
+import { useState, useRef, useCallback } from 'react';
+
+function useToast(duration = 3e3) {
+  const [toasts, setToasts] = useState([]);
+  const idRef = useRef(0);
+  const showToast = useCallback(
+    (message) => {
+      const id = ++idRef.current;
+      setToasts((prev) => [...prev, { id, message }]);
+      setTimeout(() => {
+        setToasts((prev) => prev.filter((t) => t.id !== id));
+      }, duration);
+    },
+    [duration]
+  );
+  const dismissToast = useCallback((id) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+  return { toasts, showToast, dismissToast };
+}
+
+export { useToast };

package/dist/esm/components/chat-search/text-config.js

@@ -0,0 +1,29 @@
+const defaultTextConfig = {
+  headerText: "How can we help you today?",
+  searchPlaceholder: "Ask a question or type a search term here ...",
+  attachImageText: "Attach image",
+  allDocumentsText: "All documents",
+  loadingSearchText: "Searching for relevant content...",
+  loadingAnswerText: "Crafting a response...",
+  errorText: "Sorry, we were unable to process the request right now. Please try again in a moment.",
+  followUpPlaceholder: "Type your response or follow-up",
+  positiveAnswerText: "Helpful",
+  negativeAnswerText: "Not helpful",
+  uncertaintyFallbackText: {
+    "en": "Sorry, I can't find a clear answer to your question. Please try rephrasing or check the related sources below.",
+    "es": "Lo siento, no puedo encontrar una respuesta clara. Intente reformular la pregunta o consulte las fuentes relacionadas.",
+    "fr": "Désolé, je ne trouve pas de réponse claire. Essayez de reformuler ou consultez les sources connexes.",
+    "de": "Entschuldigung, ich finde keine klare Antwort. Versuchen Sie es anders zu formulieren oder sehen Sie sich die verwandten Quellen an.",
+    "it": "Mi dispiace, non trovo una risposta chiara. Prova a riformulare o consulta le fonti correlate.",
+    "pt": "Desculpe, não encontro uma resposta clara. Tente reformular ou consulte as fontes relacionadas.",
+    "nl": "Sorry, ik kan geen duidelijk antwoord vinden. Probeer het anders te formuleren of bekijk de gerelateerde bronnen.",
+    "pl": "Przepraszam, nie znajduję jasnej odpowiedzi. Spróbuj przeformułować pytanie lub sprawdź powiązane źródła.",
+    "ru": "Извините, я не могу найти четкого ответа. Попробуйте переформулировать или ознакомьтесь со связанными источниками.",
+    "ja": "申し訳ありませんが、明確な回答が見つかりません。質問の言い換えや、関連ソースをご確認ください。",
+    "ko": "죄송합니다. 명확한 답변을 찾을 수 없습니다. 질문을 다시 작성하거나 관련 소스를 확인해 주세요.",
+    "zh": "抱歉，找不到明确的答案。请尝试重新表述或查看相关来源。",
+    "zh-TW": "抱歉，找不到明確的答案。請嘗試重新表述或查看相關來源。"
+  }
+};
+
+export { defaultTextConfig };

package/dist/esm/components/chat-search/types.js

@@ -0,0 +1,40 @@
+var ActionType = /* @__PURE__ */ ((ActionType2) => {
+  ActionType2["CallPhone"] = "call_phone";
+  ActionType2["OpenUrl"] = "open_url";
+  ActionType2["SendEmail"] = "send_email";
+  ActionType2["RunCallback"] = "run_callback";
+  ActionType2["LaunchIntercomChat"] = "launch_intercom_chat";
+  ActionType2["LaunchZendeskChat"] = "launch_zendesk_chat";
+  ActionType2["LaunchZendeskMessenger"] = "launch_zendesk_messenger";
+  ActionType2["LaunchFreshdesk"] = "launch_freshdesk";
+  ActionType2["LaunchSupportTicketForm"] = "launch_support_ticket_form";
+  ActionType2["LaunchZendeskSunshineChat"] = "launch_zendesk_sunshine_chat";
+  ActionType2["LaunchWebhookHandoff"] = "launch_webhook_handoff";
+  return ActionType2;
+})(ActionType || {});
+const isUrlString = (value) => {
+  const urlRegExp = /^(https?|ftp):\/\/[^\s/$.?#].[^\s]*$/i;
+  return urlRegExp.test(value);
+};
+const validateUrlString = (value) => {
+  if (!isUrlString(value)) {
+    throw new Error(`Invalid URL: ${value}`);
+  }
+  return value;
+};
+var NextBestActionType = /* @__PURE__ */ ((NextBestActionType2) => {
+  NextBestActionType2["Link"] = "link";
+  NextBestActionType2["Email"] = "email";
+  NextBestActionType2["Phone"] = "phone";
+  NextBestActionType2["Callback"] = "callback";
+  NextBestActionType2["Function"] = "function";
+  NextBestActionType2["ZendeskChat"] = "zendesk_chat";
+  NextBestActionType2["ZendeskMessenger"] = "zendesk_messenger";
+  NextBestActionType2["IntercomChat"] = "intercom_chat";
+  NextBestActionType2["Freshdesk"] = "freshdesk";
+  NextBestActionType2["ZendeskSunshineChat"] = "zendesk_sunshine_chat";
+  NextBestActionType2["WebhookHandoff"] = "webhook_handoff";
+  return NextBestActionType2;
+})(NextBestActionType || {});
+
+export { ActionType, NextBestActionType, validateUrlString };

package/dist/esm/components/chat-search.js

@@ -1,2 +1,5 @@
-export{C as ChatSearch,a as ChatSearchProvider,N as NextBestActionType,R as ResolvedConversationFooter,u as useChatSearch,b as useIsChatSearchDirty,v as validateUrlString}from"../chunks/ChatSearch.Crh0QjPs.js";
-//# sourceMappingURL=chat-search.js.map
+export { default as ChatSearch } from './chat-search/ChatSearch.js';
+export { ResolvedConversationFooter } from './chat-search/ResolvedConversationFooter.js';
+export { NextBestActionType, validateUrlString } from './chat-search/types.js';
+export { ChatSearchProvider, useChatSearch } from './chat-search/ChatSearchContext.js';
+export { useIsChatSearchDirty } from './chat-search/hooks/useIsChatSearchDirty.js';

package/dist/esm/components/combobox/combobox.js

@@ -0,0 +1,94 @@
+import * as React from 'react';
+import { CaretUpDown, Check } from '@phosphor-icons/react';
+import { cn } from '../../lib/utils.js';
+import { Button } from '../ui/button.js';
+import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from '../ui/command.js';
+import { Popover, PopoverTrigger, PopoverContent } from '../ui/popover.js';
+
+function Combobox({
+  options,
+  defaultValueLabel,
+  placeholder,
+  noResultsLabel,
+  className,
+  onOpenChange,
+  onChange,
+  dropdownWidth,
+  value: controlledValue,
+  disabled = false,
+  renderItem,
+  renderValue,
+  renderTrigger,
+  appendToBody = true
+}) {
+  const [open, setOpen] = React.useState(false);
+  const [internalValue, setInternalValue] = React.useState("");
+  const value = controlledValue !== void 0 ? controlledValue : internalValue;
+  const triggerRef = React.useRef(null);
+  const [triggerWidth, setTriggerWidth] = React.useState(null);
+  const selectedItem = options.find((option) => option.value === value);
+  const handleOpenChange = (isOpen) => {
+    if (isOpen && triggerRef.current) {
+      setTriggerWidth(dropdownWidth ? dropdownWidth : triggerRef.current.offsetWidth);
+    }
+    setOpen(isOpen);
+    onOpenChange?.(isOpen);
+  };
+  const handleSelect = (selectedValue) => {
+    const newValue = selectedValue === value ? "" : selectedValue;
+    if (controlledValue === void 0) {
+      setInternalValue(newValue);
+    }
+    setOpen(false);
+    onChange?.(newValue);
+  };
+  const defaultTriggerContent = selectedItem ? renderValue ? renderValue(selectedItem) : selectedItem.label : defaultValueLabel;
+  return /* @__PURE__ */ React.createElement(Popover, { open, onOpenChange: handleOpenChange }, /* @__PURE__ */ React.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      ref: triggerRef,
+      variant: "outline",
+      role: "combobox",
+      "aria-expanded": open,
+      disabled,
+      className: cn("w-full justify-between", className)
+    },
+    renderTrigger ? renderTrigger({ selectedItem, isOpen: open }) : defaultTriggerContent,
+    /* @__PURE__ */ React.createElement(CaretUpDown, { className: "opacity-50" })
+  )), /* @__PURE__ */ React.createElement(
+    PopoverContent,
+    {
+      appendToBody,
+      className: "p-0",
+      style: {
+        width: triggerWidth ? `${triggerWidth}px` : "auto"
+      },
+      align: "start"
+    },
+    /* @__PURE__ */ React.createElement(Command, null, /* @__PURE__ */ React.createElement(CommandInput, { placeholder }), /* @__PURE__ */ React.createElement(CommandList, null, /* @__PURE__ */ React.createElement(CommandEmpty, null, noResultsLabel), /* @__PURE__ */ React.createElement(CommandGroup, null, options.map((option) => {
+      const isSelected = value === option.value;
+      if (renderItem) {
+        return /* @__PURE__ */ React.createElement(React.Fragment, { key: option.value }, renderItem({
+          item: option,
+          isSelected,
+          onSelect: () => handleSelect(option.value)
+        }));
+      }
+      return /* @__PURE__ */ React.createElement(
+        CommandItem,
+        {
+          key: option.value,
+          value: option.label,
+          onSelect: (currentLabel) => {
+            const selectedOption = options.find((opt) => opt.label === currentLabel);
+            handleSelect(selectedOption?.value || "");
+          }
+        },
+        option.label,
+        /* @__PURE__ */ React.createElement(Check, { className: cn("ml-auto", isSelected ? "opacity-100" : "opacity-0") })
+      );
+    }))))
+  ));
+}
+
+export { Combobox };

package/dist/esm/components/combobox.js

@@ -1,2 +1 @@
-export{C as Combobox}from"../chunks/combobox.Ccfe3IGO.js";
-//# sourceMappingURL=combobox.js.map
+export { Combobox } from './combobox/combobox.js';

package/dist/esm/components/confirm-dialog/confirm-dialog.js

@@ -0,0 +1,46 @@
+import React__default from 'react';
+import { AlertDialog, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction } from '../ui/alert-dialog.js';
+
+const ConfirmDialog = React__default.forwardRef(
+  ({
+    title,
+    description,
+    onSubmit,
+    onCancel,
+    open: externalOpen,
+    onOpenChange: externalOnOpenChange,
+    variant,
+    cancelText,
+    submitText,
+    loadingText,
+    zIndex = 50
+  }, ref) => {
+    const [isLoading, setIsLoading] = React__default.useState(false);
+    const [internalOpen, setInternalOpen] = React__default.useState(false);
+    const isOpen = externalOpen ?? internalOpen;
+    const setIsOpen = externalOnOpenChange ?? setInternalOpen;
+    React__default.useImperativeHandle(ref, () => ({
+      open: () => setIsOpen(true),
+      close: () => setIsOpen(false)
+    }));
+    const handleCancel = () => {
+      if (isLoading) return;
+      onCancel?.();
+      setIsOpen(false);
+    };
+    const handleSubmit = async () => {
+      if (isLoading) return;
+      setIsLoading(true);
+      try {
+        await onSubmit();
+        setIsOpen(false);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    return /* @__PURE__ */ React__default.createElement(AlertDialog, { open: isOpen, onOpenChange: setIsOpen }, /* @__PURE__ */ React__default.createElement(AlertDialogContent, { zIndex }, /* @__PURE__ */ React__default.createElement(AlertDialogHeader, null, /* @__PURE__ */ React__default.createElement(AlertDialogTitle, null, title), /* @__PURE__ */ React__default.createElement(AlertDialogDescription, null, description)), /* @__PURE__ */ React__default.createElement(AlertDialogFooter, null, /* @__PURE__ */ React__default.createElement(AlertDialogCancel, { onClick: handleCancel, disabled: isLoading }, cancelText), /* @__PURE__ */ React__default.createElement(AlertDialogAction, { variant, onClick: handleSubmit, disabled: isLoading }, isLoading ? loadingText || submitText : submitText))));
+  }
+);
+ConfirmDialog.displayName = "ConfirmDialog";
+
+export { ConfirmDialog };

package/dist/esm/components/confirm-dialog.js

@@ -1,3 +1 @@
-import e from"react";import{AlertDialog as t,AlertDialogContent as n,AlertDialogHeader as a,AlertDialogTitle as l,AlertDialogDescription as r,AlertDialogFooter as i,AlertDialogCancel as o,AlertDialogAction as c}from"./ui/alert-dialog.js";const m=e.forwardRef(({title:m,description:s,onSubmit:d,onCancel:p,open:u,onOpenChange:E,variant:f,cancelText:x,submitText:C,loadingText:g,zIndex:b=50},y)=>{const[v,I]=e.useState(!1),[S,T]=e.useState(!1),h=u??S,k=E??T;e.useImperativeHandle(y,()=>({open:()=>k(!0),close:()=>k(!1)}));/* @__PURE__ */
-return e.createElement(t,{open:h,onOpenChange:k},/* @__PURE__ */e.createElement(n,{zIndex:b},/* @__PURE__ */e.createElement(a,null,/* @__PURE__ */e.createElement(l,null,m),/* @__PURE__ */e.createElement(r,null,s)),/* @__PURE__ */e.createElement(i,null,/* @__PURE__ */e.createElement(o,{onClick:()=>{v||(p?.(),k(!1))},disabled:v},x),/* @__PURE__ */e.createElement(c,{variant:f,onClick:async()=>{if(!v){I(!0);try{await d(),k(!1)}finally{I(!1)}}},disabled:v},v&&g||C))))});m.displayName="ConfirmDialog";export{m as ConfirmDialog};
-//# sourceMappingURL=confirm-dialog.js.map
+export { ConfirmDialog } from './confirm-dialog/confirm-dialog.js';

package/dist/esm/components/conversation/AttachmentPreviews.js

@@ -0,0 +1,86 @@
+import React__default from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { X } from '@phosphor-icons/react';
+import { cn } from '../../lib/utils.js';
+
+function Lightbox({ src, alt, open, onClose }) {
+  return /* @__PURE__ */ React__default.createElement(
+    DialogPrimitive.Root,
+    {
+      open,
+      onOpenChange: (o) => {
+        if (!o) onClose();
+      }
+    },
+    /* @__PURE__ */ React__default.createElement(DialogPrimitive.Portal, null, /* @__PURE__ */ React__default.createElement(DialogPrimitive.Overlay, { className: "fixed inset-0 z-50 bg-black/80 cursor-zoom-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" }), /* @__PURE__ */ React__default.createElement(
+      DialogPrimitive.Content,
+      {
+        className: "fixed left-1/2 top-1/2 z-50 max-w-[calc(100vw-4rem)] max-h-[calc(100vh-4rem)] outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+        style: { translate: "-50% -50%" },
+        "aria-describedby": void 0,
+        onPointerDownOutside: onClose
+      },
+      /* @__PURE__ */ React__default.createElement(DialogPrimitive.Title, { className: "sr-only" }, alt ?? "Image preview"),
+      /* @__PURE__ */ React__default.createElement(
+        "img",
+        {
+          src,
+          alt: alt ?? "Attachment",
+          className: "max-w-full max-h-full object-contain rounded-lg ring-1 ring-white/10"
+        }
+      )
+    ))
+  );
+}
+function Thumbnail({ file, url, alt, loading, onRemove }) {
+  const [objectUrl, setObjectUrl] = React__default.useState();
+  const [lightboxOpen, setLightboxOpen] = React__default.useState(false);
+  React__default.useEffect(() => {
+    if (!file) return;
+    const obj = URL.createObjectURL(file);
+    setObjectUrl(obj);
+    return () => URL.revokeObjectURL(obj);
+  }, [file]);
+  const src = url ?? objectUrl;
+  if (!src) return null;
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("div", { className: "relative group size-16 rounded-lg overflow-hidden flex-shrink-0 ring-1 ring-black/10 dark:ring-white/10" }, /* @__PURE__ */ React__default.createElement(
+    "button",
+    {
+      type: "button",
+      className: "w-full h-full cursor-zoom-in",
+      onClick: () => setLightboxOpen(true),
+      disabled: loading
+    },
+    /* @__PURE__ */ React__default.createElement("img", { src, alt: alt ?? "Attachment", className: "w-full h-full object-cover" })
+  ), loading && /* @__PURE__ */ React__default.createElement("div", { className: "absolute inset-0 flex items-center justify-center bg-black/40 pointer-events-none" }, /* @__PURE__ */ React__default.createElement("div", { className: "animate-spin rounded-full size-4 border-[2.5px] border-black/30 border-t-white" })), onRemove && /* @__PURE__ */ React__default.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: onRemove,
+      className: "absolute top-0.5 right-0.5 p-0.5 rounded-full opacity-0 group-hover:opacity-100 transition-opacity bg-black/50 hover:bg-black/70"
+    },
+    /* @__PURE__ */ React__default.createElement(X, { className: "size-2.5 text-white", "aria-label": "Remove" })
+  )), /* @__PURE__ */ React__default.createElement(Lightbox, { src, alt, open: lightboxOpen, onClose: () => setLightboxOpen(false) }));
+}
+function InputImageThumbnails({ attachments, onRemove, className }) {
+  const images = attachments.filter((a) => a.file.mimeType.startsWith("image/"));
+  if (images.length === 0) return null;
+  return /* @__PURE__ */ React__default.createElement("div", { className: cn("flex flex-wrap gap-2", className) }, images.map((a) => /* @__PURE__ */ React__default.createElement(
+    Thumbnail,
+    {
+      key: a.id,
+      file: a.raw,
+      url: a.file.url,
+      alt: a.file.name,
+      loading: a.loading,
+      onRemove: onRemove ? () => onRemove(a) : void 0
+    }
+  )));
+}
+function MessageImageThumbnails({ blocks, className }) {
+  const images = blocks.filter((b) => b.mimeType.startsWith("image/"));
+  if (images.length === 0) return null;
+  return /* @__PURE__ */ React__default.createElement("div", { className: cn("flex flex-wrap gap-2", className) }, images.map((b) => /* @__PURE__ */ React__default.createElement(Thumbnail, { key: b.attachmentId, url: b.url, alt: b.fileName })));
+}
+
+export { InputImageThumbnails, MessageImageThumbnails };