@copilotz/chat-ui 0.3.1 → 0.3.3

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;
@@ -216,7 +214,6 @@ interface ChatConfig {
     };
     markdown?: ChatMarkdownConfig;
     voiceCompose?: {
-        enabled?: boolean;
         defaultMode?: 'text' | 'voice';
         reviewMode?: VoiceReviewMode;
         autoSendDelayMs?: number;

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;
@@ -216,7 +214,6 @@ interface ChatConfig {
     };
     markdown?: ChatMarkdownConfig;
     voiceCompose?: {
-        enabled?: boolean;
         defaultMode?: 'text' | 'voice';
         reviewMode?: VoiceReviewMode;
         autoSendDelayMs?: number;

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",
@@ -120,7 +118,6 @@ var defaultChatConfig = {
     components: {}
   },
   voiceCompose: {
-    enabled: false,
     defaultMode: "text",
     reviewMode: "manual",
     autoSendDelayMs: 5e3,
@@ -3845,61 +3842,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 +3874,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 +3881,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 +3898,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 +3933,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 +4105,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 +4389,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 +4406,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 +4535,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 +4550,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,
@@ -5225,6 +5066,16 @@ var UserProfile = ({
 // src/components/chat/ChatUI.tsx
 import { Sparkles, ArrowRight, MessageSquare, Lightbulb as Lightbulb2, Zap, HelpCircle } from "lucide-react";
 import { jsx as jsx26, jsxs as jsxs16 } from "react/jsx-runtime";
+function getMessageSpeakerKey(message) {
+  if (!message) return null;
+  if (message.role === "assistant") {
+    return message.senderAgentId ?? message.senderName ?? "assistant";
+  }
+  if (message.role === "user") {
+    return "user";
+  }
+  return message.role;
+}
 var ChatUI = ({
   messages = [],
   threads = [],
@@ -5670,7 +5521,7 @@ var ChatUI = ({
                   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;
+                    const isGrouped = prevMessage !== null && prevMessage.role === message.role && getMessageSpeakerKey(prevMessage) === getMessageSpeakerKey(message);
                     return /* @__PURE__ */ jsx26(
                       "div",
                       {