@copilotz/chat-ui 0.3.2 → 0.3.4

package/dist/index.d.cts

@@ -131,8 +131,6 @@ interface ChatConfig {
         stopGenerationTooltip?: string;
         attachFiles?: string;
         attachFileTooltip?: string;
-        recordAudio?: string;
-        recordAudioTooltip?: string;
         voiceEnter?: string;
         voiceExit?: string;
         voiceTitle?: string;
@@ -188,6 +186,8 @@ interface ChatConfig {
         inputHelpText?: string;
         thinking?: string;
         defaultThreadName?: string;
+        loadOlderMessages?: string;
+        loadingOlderMessages?: string;
         showMoreMessage?: string;
         showLessMessage?: string;
     };
@@ -216,7 +216,6 @@ interface ChatConfig {
     };
     markdown?: ChatMarkdownConfig;
     voiceCompose?: {
-        enabled?: boolean;
         defaultMode?: 'text' | 'voice';
         reviewMode?: VoiceReviewMode;
         autoSendDelayMs?: number;
@@ -270,7 +269,10 @@ interface ChatV2Props {
     sidebar?: ReactNode;
     isGenerating?: boolean;
     isMessagesLoading?: boolean;
+    isLoadingOlderMessages?: boolean;
+    hasMoreMessagesBefore?: boolean;
     callbacks?: ChatCallbacks;
+    onLoadOlderMessages?: () => void;
     user?: {
         id: string;
         name?: string;

package/dist/index.d.ts

@@ -131,8 +131,6 @@ interface ChatConfig {
         stopGenerationTooltip?: string;
         attachFiles?: string;
         attachFileTooltip?: string;
-        recordAudio?: string;
-        recordAudioTooltip?: string;
         voiceEnter?: string;
         voiceExit?: string;
         voiceTitle?: string;
@@ -188,6 +186,8 @@ interface ChatConfig {
         inputHelpText?: string;
         thinking?: string;
         defaultThreadName?: string;
+        loadOlderMessages?: string;
+        loadingOlderMessages?: string;
         showMoreMessage?: string;
         showLessMessage?: string;
     };
@@ -216,7 +216,6 @@ interface ChatConfig {
     };
     markdown?: ChatMarkdownConfig;
     voiceCompose?: {
-        enabled?: boolean;
         defaultMode?: 'text' | 'voice';
         reviewMode?: VoiceReviewMode;
         autoSendDelayMs?: number;
@@ -270,7 +269,10 @@ interface ChatV2Props {
     sidebar?: ReactNode;
     isGenerating?: boolean;
     isMessagesLoading?: boolean;
+    isLoadingOlderMessages?: boolean;
+    hasMoreMessagesBefore?: boolean;
     callbacks?: ChatCallbacks;
+    onLoadOlderMessages?: () => void;
     user?: {
         id: string;
         name?: string;

package/dist/index.js

@@ -28,8 +28,6 @@ var defaultChatConfig = {
     stopGenerationTooltip: "Stop generation",
     attachFiles: "Attach Files",
     attachFileTooltip: "Attach file",
-    recordAudio: "Record Audio",
-    recordAudioTooltip: "Record audio",
     voiceEnter: "Voice input",
     voiceExit: "Use keyboard",
     voiceTitle: "Voice",
@@ -87,6 +85,8 @@ var defaultChatConfig = {
     inputHelpText: "Press Enter to send, Shift+Enter to add a new line.",
     thinking: "Thinking...",
     defaultThreadName: "Main Thread",
+    loadOlderMessages: "Load older messages",
+    loadingOlderMessages: "Loading older messages...",
     showMoreMessage: "Show more",
     showLessMessage: "Show less"
   },
@@ -120,7 +120,6 @@ var defaultChatConfig = {
     components: {}
   },
   voiceCompose: {
-    enabled: false,
     defaultMode: "text",
     reviewMode: "manual",
     autoSendDelayMs: 5e3,
@@ -3845,61 +3844,6 @@ var AttachmentPreview = memo3(function AttachmentPreview2({ attachment, onRemove
     attachment.fileName && attachment.kind !== "audio" && /* @__PURE__ */ jsx23("div", { className: "absolute bottom-0 left-0 right-0 bg-black/70 text-white text-xs p-1 rounded-b", children: /* @__PURE__ */ jsx23("p", { className: "truncate", children: attachment.fileName }) })
   ] }) });
 });
-var AudioRecorder = memo3(function AudioRecorder2({ isRecording, onStartRecording, onStopRecording, onCancel, recordingDuration, config }) {
-  const formatTime = (seconds) => {
-    const mins = Math.floor(seconds / 60);
-    const secs = seconds % 60;
-    return `${mins}:${secs.toString().padStart(2, "0")}`;
-  };
-  if (!isRecording) {
-    return /* @__PURE__ */ jsxs13(Tooltip, { children: [
-      /* @__PURE__ */ jsx23(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx23(
-        Button,
-        {
-          variant: "outline",
-          size: "icon",
-          onClick: onStartRecording,
-          className: "h-10 w-10",
-          children: /* @__PURE__ */ jsx23(Mic2, { className: "h-4 w-4" })
-        }
-      ) }),
-      /* @__PURE__ */ jsx23(TooltipContent, { children: config?.labels?.recordAudioTooltip })
-    ] });
-  }
-  return /* @__PURE__ */ jsx23(Card, { className: "border-red-200 bg-red-50 dark:border-red-800 dark:bg-red-950", children: /* @__PURE__ */ jsx23(CardContent, { className: "p-3", children: /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-3", children: [
-    /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx23("div", { className: "h-3 w-3 bg-red-500 rounded-full animate-pulse" }),
-      /* @__PURE__ */ jsx23("span", { className: "text-sm font-medium text-red-700 dark:text-red-300", children: config?.labels?.voiceListening || "Recording" })
-    ] }),
-    /* @__PURE__ */ jsx23(Badge, { variant: "outline", className: "text-xs", children: formatTime(recordingDuration) }),
-    /* @__PURE__ */ jsxs13("div", { className: "flex gap-1 ml-auto", children: [
-      /* @__PURE__ */ jsxs13(
-        Button,
-        {
-          variant: "outline",
-          size: "sm",
-          onClick: onCancel,
-          children: [
-            /* @__PURE__ */ jsx23(X4, { className: "h-3 w-3 mr-1" }),
-            config?.labels?.cancel || "Cancel"
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxs13(
-        Button,
-        {
-          variant: "default",
-          size: "sm",
-          onClick: onStopRecording,
-          children: [
-            /* @__PURE__ */ jsx23(Square2, { className: "h-3 w-3 mr-1" }),
-            config?.labels?.voiceStop || "Stop"
-          ]
-        }
-      )
-    ] })
-  ] }) }) });
-});
 var resolveVoiceErrorMessage = (error, config) => {
   if (error instanceof DOMException && error.name === "NotAllowedError") {
     return config?.labels?.voicePermissionDenied || "Microphone access was denied.";
@@ -3932,7 +3876,6 @@ var ChatInput = memo3(function ChatInput2({
   mentionAgents = [],
   onTargetAgentChange
 }) {
-  const voiceComposeEnabled = config?.voiceCompose?.enabled === true;
   const voiceDefaultMode = config?.voiceCompose?.defaultMode ?? "text";
   const voiceReviewMode = config?.voiceCompose?.reviewMode ?? "manual";
   const voiceAutoSendDelayMs = config?.voiceCompose?.autoSendDelayMs ?? 5e3;
@@ -3940,12 +3883,10 @@ var ChatInput = memo3(function ChatInput2({
   const voiceShowTranscriptPreview = config?.voiceCompose?.showTranscriptPreview ?? true;
   const voiceTranscriptMode = config?.voiceCompose?.transcriptMode ?? "final-only";
   const voiceMaxRecordingMs = config?.voiceCompose?.maxRecordingMs;
-  const [isRecording, setIsRecording] = useState6(false);
   const { setContext } = useChatUserContext();
-  const [recordingDuration, setRecordingDuration] = useState6(0);
   const [uploadProgress, setUploadProgress] = useState6(/* @__PURE__ */ new Map());
   const [isVoiceComposerOpen, setIsVoiceComposerOpen] = useState6(
-    () => voiceComposeEnabled && voiceDefaultMode === "voice"
+    () => enableAudioRecording && voiceDefaultMode === "voice"
   );
   const [voiceState, setVoiceState] = useState6("idle");
   const [voiceDraft, setVoiceDraft] = useState6(null);
@@ -3959,10 +3900,6 @@ var ChatInput = memo3(function ChatInput2({
   const [activeMentionIndex, setActiveMentionIndex] = useState6(0);
   const textareaRef = useRef5(null);
   const fileInputRef = useRef5(null);
-  const mediaRecorderRef = useRef5(null);
-  const recordingStartTime = useRef5(0);
-  const recordingInterval = useRef5(null);
-  const mediaStreamRef = useRef5(null);
   const voiceProviderRef = useRef5(null);
   const voiceDraftRef = useRef5(null);
   const voiceAppendBaseRef = useRef5(null);
@@ -3998,12 +3935,6 @@ var ChatInput = memo3(function ChatInput2({
   }, []);
   useEffect9(() => {
     return () => {
-      if (mediaStreamRef.current) {
-        mediaStreamRef.current.getTracks().forEach((track) => track.stop());
-      }
-      if (recordingInterval.current) {
-        clearInterval(recordingInterval.current);
-      }
       if (voiceProviderRef.current) {
         void voiceProviderRef.current.destroy();
         voiceProviderRef.current = null;
@@ -4176,73 +4107,6 @@ var ChatInput = memo3(function ChatInput2({
   const handleDragOver = useCallback3((e) => {
     e.preventDefault();
   }, []);
-  const startRecording = async () => {
-    try {
-      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
-      mediaStreamRef.current = stream;
-      const mediaRecorder = new MediaRecorder(stream);
-      mediaRecorderRef.current = mediaRecorder;
-      const chunks = [];
-      mediaRecorder.ondataavailable = (e) => {
-        chunks.push(e.data);
-      };
-      mediaRecorder.onstop = async () => {
-        const blob = new Blob(chunks, { type: "audio/webm" });
-        const dataUrl = await new Promise((resolve, reject) => {
-          const reader = new FileReader();
-          reader.onload = () => resolve(reader.result);
-          reader.onerror = reject;
-          reader.readAsDataURL(blob);
-        });
-        const attachment = {
-          kind: "audio",
-          dataUrl,
-          mimeType: blob.type,
-          durationMs: recordingDuration * 1e3,
-          fileName: `audio_${(/* @__PURE__ */ new Date()).toISOString().slice(0, 19)}.webm`,
-          size: blob.size
-        };
-        onAttachmentsChange([...attachments, attachment]);
-        if (mediaStreamRef.current) {
-          mediaStreamRef.current.getTracks().forEach((track) => track.stop());
-          mediaStreamRef.current = null;
-        }
-      };
-      recordingStartTime.current = Date.now();
-      setRecordingDuration(0);
-      setIsRecording(true);
-      mediaRecorder.start();
-      recordingInterval.current = setInterval(() => {
-        const duration = Math.floor((Date.now() - recordingStartTime.current) / 1e3);
-        setRecordingDuration(duration);
-      }, 1e3);
-    } catch (error) {
-      console.error("Error starting recording:", error);
-      alert(config?.labels?.voicePermissionDenied || "Microphone access was denied.");
-    }
-  };
-  const stopRecording = () => {
-    if (mediaRecorderRef.current && isRecording) {
-      mediaRecorderRef.current.stop();
-      setIsRecording(false);
-      if (recordingInterval.current) {
-        clearInterval(recordingInterval.current);
-      }
-    }
-  };
-  const cancelRecording = () => {
-    if (mediaRecorderRef.current && isRecording) {
-      mediaRecorderRef.current.stop();
-      setIsRecording(false);
-      if (recordingInterval.current) {
-        clearInterval(recordingInterval.current);
-      }
-      if (mediaStreamRef.current) {
-        mediaStreamRef.current.getTracks().forEach((track) => track.stop());
-        mediaStreamRef.current = null;
-      }
-    }
-  };
   const resetVoiceComposerState = useCallback3((nextState = "idle") => {
     setVoiceState(nextState);
     setVoiceDraft(null);
@@ -4527,7 +4391,7 @@ var ChatInput = memo3(function ChatInput2({
     onAttachmentsChange(newAttachments);
   };
   const canAddMoreAttachments = attachments.length < maxAttachments;
-  const showVoiceComposer = voiceComposeEnabled && isVoiceComposerOpen;
+  const showVoiceComposer = enableAudioRecording && isVoiceComposerOpen;
   return /* @__PURE__ */ jsx23(TooltipProvider, { children: /* @__PURE__ */ jsx23("div", { className: `border-t py-0 bg-transparent ${className}`, children: /* @__PURE__ */ jsxs13("div", { className: "px-0 md:p-2 pb-1 space-y-4 bg-transparent", children: [
     uploadProgress.size > 0 && /* @__PURE__ */ jsx23("div", { className: "space-y-2", children: Array.from(uploadProgress.entries()).map(([id, progress]) => /* @__PURE__ */ jsx23(
       FileUploadItem,
@@ -4544,17 +4408,6 @@ var ChatInput = memo3(function ChatInput2({
       },
       id
     )) }),
-    isRecording && /* @__PURE__ */ jsx23(
-      AudioRecorder,
-      {
-        isRecording,
-        onStartRecording: startRecording,
-        onStopRecording: stopRecording,
-        onCancel: cancelRecording,
-        recordingDuration,
-        config
-      }
-    ),
     attachments.length > 0 && /* @__PURE__ */ jsx23("div", { className: "grid grid-cols-4 gap-2", children: attachments.map((attachment, index) => /* @__PURE__ */ jsx23(
       AttachmentPreview,
       {
@@ -4684,7 +4537,7 @@ var ChatInput = memo3(function ChatInput2({
               agent.id
             )) }) })
           ] }),
-          enableAudioRecording && !isRecording && canAddMoreAttachments && !value.trim() && (voiceComposeEnabled ? /* @__PURE__ */ jsxs13(Tooltip, { children: [
+          enableAudioRecording && canAddMoreAttachments && !value.trim() && /* @__PURE__ */ jsxs13(Tooltip, { children: [
             /* @__PURE__ */ jsx23(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx23(
               Button,
               {
@@ -4699,18 +4552,8 @@ var ChatInput = memo3(function ChatInput2({
                 children: /* @__PURE__ */ jsx23(Mic2, { className: "h-4 w-4" })
               }
             ) }),
-            /* @__PURE__ */ jsx23(TooltipContent, { children: config?.labels?.voiceEnter || config?.labels?.recordAudioTooltip })
-          ] }) : /* @__PURE__ */ jsx23(
-            AudioRecorder,
-            {
-              isRecording,
-              onStartRecording: startRecording,
-              onStopRecording: stopRecording,
-              onCancel: cancelRecording,
-              recordingDuration,
-              config
-            }
-          )),
+            /* @__PURE__ */ jsx23(TooltipContent, { children: config?.labels?.voiceEnter })
+          ] }),
           isGenerating ? /* @__PURE__ */ jsxs13(Tooltip, { children: [
             /* @__PURE__ */ jsx23(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx23(
               Button,
@@ -5243,7 +5086,10 @@ var ChatUI = ({
   sidebar: _sidebar,
   isGenerating = false,
   isMessagesLoading = false,
+  isLoadingOlderMessages = false,
+  hasMoreMessagesBefore = false,
   callbacks = {},
+  onLoadOlderMessages,
   user,
   assistant,
   suggestions = [],
@@ -5310,6 +5156,7 @@ var ChatUI = ({
     }
   }, [initialInput]);
   const scrollAreaRef = useRef6(null);
+  const prependSnapshotRef = useRef6(null);
   const stateRef = useRef6(state);
   const inputValueRef = useRef6(inputValue);
   const attachmentsRef = useRef6(attachments);
@@ -5367,6 +5214,10 @@ var ChatUI = ({
       prevMessageCountRef.current = 0;
       return;
     }
+    if (prependSnapshotRef.current) {
+      prevMessageCountRef.current = messages.length;
+      return;
+    }
     const wasEmpty = prevMessageCountRef.current === 0;
     prevMessageCountRef.current = messages.length;
     if (wasEmpty) {
@@ -5391,6 +5242,46 @@ var ChatUI = ({
   useEffect10(() => {
     virtualizer.measure();
   }, [expandedMessageIds, virtualizer]);
+  useEffect10(() => {
+    prependSnapshotRef.current = null;
+  }, [currentThreadId]);
+  useEffect10(() => {
+    const snapshot = prependSnapshotRef.current;
+    if (!snapshot) return;
+    if (messages.length <= snapshot.messageCount) {
+      if (!isLoadingOlderMessages) {
+        prependSnapshotRef.current = null;
+      }
+      return;
+    }
+    if ((messages[0]?.id ?? null) === snapshot.firstMessageId) {
+      if (!isLoadingOlderMessages) {
+        prependSnapshotRef.current = null;
+      }
+      return;
+    }
+    requestAnimationFrame(() => {
+      virtualizer.measure();
+      requestAnimationFrame(() => {
+        const viewport = scrollAreaRef.current;
+        if (!viewport) return;
+        const heightDelta = viewport.scrollHeight - snapshot.scrollHeight;
+        viewport.scrollTop = snapshot.scrollTop + heightDelta;
+        prependSnapshotRef.current = null;
+      });
+    });
+  }, [messages, isLoadingOlderMessages, virtualizer]);
+  const requestOlderMessages = useCallback4(() => {
+    if (!onLoadOlderMessages || !hasMoreMessagesBefore || isLoadingOlderMessages) return;
+    const viewport = scrollAreaRef.current;
+    prependSnapshotRef.current = viewport ? {
+      scrollHeight: viewport.scrollHeight,
+      scrollTop: viewport.scrollTop,
+      firstMessageId: messages[0]?.id ?? null,
+      messageCount: messages.length
+    } : null;
+    onLoadOlderMessages();
+  }, [hasMoreMessagesBefore, isLoadingOlderMessages, messages, onLoadOlderMessages]);
   useEffect10(() => {
     const validMessageIds = new Set(messages.map((message) => message.id));
     setExpandedMessageIds((prev) => {
@@ -5409,11 +5300,15 @@ var ChatUI = ({
   const handleScroll = useCallback4((e) => {
     const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
     const isAtBottom = scrollHeight - scrollTop - clientHeight < 50;
+    const isNearTop = scrollTop < 120;
+    if (isNearTop && hasMoreMessagesBefore && !isLoadingOlderMessages) {
+      requestOlderMessages();
+    }
     setState((prev) => {
       if (prev.isAtBottom === isAtBottom) return prev;
       return { ...prev, isAtBottom };
     });
-  }, []);
+  }, [hasMoreMessagesBefore, isLoadingOlderMessages, requestOlderMessages]);
   const handleSendMessage = useCallback4((content, messageAttachments = []) => {
     if (!content.trim() && messageAttachments.length === 0) return;
     callbacks.onSendMessage?.(content, messageAttachments, createStateCallback());
@@ -5669,48 +5564,59 @@ var ChatUI = ({
               viewportClassName: "p-4 overscroll-contain",
               onScrollCapture: handleScroll,
               style: { contain: "strict" },
-              children: /* @__PURE__ */ jsx26("div", { className: "max-w-4xl mx-auto pb-4", children: isMessagesLoading ? renderMessageLoadingSkeleton() : messages.length === 0 ? renderSuggestions() : /* @__PURE__ */ jsx26(
-                "div",
-                {
-                  style: {
-                    height: `${virtualizer.getTotalSize()}px`,
-                    width: "100%",
-                    position: "relative"
-                  },
-                  children: virtualizer.getVirtualItems().map((virtualRow) => {
-                    const message = messages[virtualRow.index];
-                    const prevMessage = virtualRow.index > 0 ? messages[virtualRow.index - 1] : null;
-                    const isGrouped = prevMessage !== null && prevMessage.role === message.role && getMessageSpeakerKey(prevMessage) === getMessageSpeakerKey(message);
-                    return /* @__PURE__ */ jsx26(
-                      "div",
-                      {
-                        "data-index": virtualRow.index,
-                        ref: virtualizer.measureElement,
-                        style: {
-                          position: "absolute",
-                          top: 0,
-                          left: 0,
-                          width: "100%",
-                          transform: `translateY(${virtualRow.start}px)`
+              children: /* @__PURE__ */ jsxs16("div", { className: "max-w-4xl mx-auto pb-4", children: [
+                messages.length > 0 && /* @__PURE__ */ jsx26("div", { className: "flex justify-center py-2", children: isLoadingOlderMessages ? /* @__PURE__ */ jsx26("span", { className: "text-xs text-muted-foreground", children: config.labels.loadingOlderMessages }) : hasMoreMessagesBefore ? /* @__PURE__ */ jsx26(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: requestOlderMessages,
+                    className: "text-xs text-muted-foreground transition-colors hover:text-foreground",
+                    children: config.labels.loadOlderMessages
+                  }
+                ) : null }),
+                isMessagesLoading ? renderMessageLoadingSkeleton() : messages.length === 0 ? renderSuggestions() : /* @__PURE__ */ jsx26(
+                  "div",
+                  {
+                    style: {
+                      height: `${virtualizer.getTotalSize()}px`,
+                      width: "100%",
+                      position: "relative"
+                    },
+                    children: virtualizer.getVirtualItems().map((virtualRow) => {
+                      const message = messages[virtualRow.index];
+                      const prevMessage = virtualRow.index > 0 ? messages[virtualRow.index - 1] : null;
+                      const isGrouped = prevMessage !== null && prevMessage.role === message.role && getMessageSpeakerKey(prevMessage) === getMessageSpeakerKey(message);
+                      return /* @__PURE__ */ jsx26(
+                        "div",
+                        {
+                          "data-index": virtualRow.index,
+                          ref: virtualizer.measureElement,
+                          style: {
+                            position: "absolute",
+                            top: 0,
+                            left: 0,
+                            width: "100%",
+                            transform: `translateY(${virtualRow.start}px)`
+                          },
+                          children: /* @__PURE__ */ jsxs16("div", { className: virtualRow.index === 0 ? "" : isGrouped ? "pt-2" : "pt-4", children: [
+                            /* @__PURE__ */ jsx26(
+                              Message,
+                              {
+                                message,
+                                ...messageProps,
+                                isGrouped,
+                                isExpanded: Boolean(expandedMessageIds[message.id])
+                              }
+                            ),
+                            message.role === "assistant" && renderInlineSuggestions(message.id)
+                          ] })
                         },
-                        children: /* @__PURE__ */ jsxs16("div", { className: virtualRow.index === 0 ? "" : isGrouped ? "pt-2" : "pt-4", children: [
-                          /* @__PURE__ */ jsx26(
-                            Message,
-                            {
-                              message,
-                              ...messageProps,
-                              isGrouped,
-                              isExpanded: Boolean(expandedMessageIds[message.id])
-                            }
-                          ),
-                          message.role === "assistant" && renderInlineSuggestions(message.id)
-                        ] })
-                      },
-                      message.id
-                    );
-                  })
-                }
-              ) })
+                        message.id
+                      );
+                    })
+                  }
+                )
+              ] })
             }
           ),
           /* @__PURE__ */ jsxs16("div", { className: "bg-background pb-[env(safe-area-inset-bottom)]", children: [