@copilotkit/vue 2.0.0-rc.3 → 2.0.0-rc.31

package/src/v2/components/chat/CopilotChatAudioRecorder.vue

@@ -1,264 +1,37 @@
 <script setup lang="ts">
-import { onBeforeUnmount, ref, useAttrs, watch } from "vue";
-import { AudioRecorderError } from "./audioRecorder";
-import type { AudioRecorderState } from "./audioRecorder";
+/**
+ * Records from the microphone and draws the live level as a scrolling
+ * waveform. The recording itself is `ɵAudioRecorder` from
+ * `@copilotkit/core`; control it through the exposed ref.
+ */
+import { onBeforeUnmount, onMounted, ref, useAttrs } from "vue";
+import { ɵAudioRecorder, ɵcreateWaveformRenderer } from "@copilotkit/core";
 
 defineOptions({ inheritAttrs: false });
 
 const attrs = useAttrs();
 const canvasRef = ref<HTMLCanvasElement | null>(null);
-const recorderState = ref<AudioRecorderState>("idle");
-const mediaRecorderRef = ref<MediaRecorder | null>(null);
-const streamRef = ref<MediaStream | null>(null);
-const analyserRef = ref<AnalyserNode | null>(null);
-const audioContextRef = ref<AudioContext | null>(null);
-const animationIdRef = ref<number | null>(null);
-const audioChunksRef = ref<Blob[]>([]);
-const amplitudeHistoryRef = ref<number[]>([]);
-const scrollOffsetRef = ref(0);
-const smoothedAmplitudeRef = ref(0);
-const fadeOpacityRef = ref(0);
+const recorder = new ɵAudioRecorder();
+let waveform: { dispose: () => void } | undefined;
 
-function cleanup() {
-  if (animationIdRef.value !== null) {
-    cancelAnimationFrame(animationIdRef.value);
-    animationIdRef.value = null;
+onMounted(() => {
+  if (canvasRef.value) {
+    waveform = ɵcreateWaveformRenderer(canvasRef.value, recorder);
   }
-
-  const recorder = mediaRecorderRef.value;
-  if (recorder && recorder.state !== "inactive") {
-    try {
-      recorder.stop();
-    } catch {
-      // ignore cleanup stop failures
-    }
-  }
-
-  if (streamRef.value) {
-    streamRef.value.getTracks().forEach((track) => track.stop());
-    streamRef.value = null;
-  }
-
-  const audioContext = audioContextRef.value;
-  if (audioContext && audioContext.state !== "closed") {
-    audioContext.close().catch(() => {
-      // ignore close errors
-    });
-  }
-
-  mediaRecorderRef.value = null;
-  analyserRef.value = null;
-  audioContextRef.value = null;
-  audioChunksRef.value = [];
-  amplitudeHistoryRef.value = [];
-  scrollOffsetRef.value = 0;
-  smoothedAmplitudeRef.value = 0;
-  fadeOpacityRef.value = 0;
-}
-
-async function start() {
-  if (recorderState.value !== "idle") {
-    throw new AudioRecorderError("Recorder is already active");
-  }
-
-  try {
-    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
-    streamRef.value = stream;
-
-    const audioContext = new AudioContext();
-    audioContextRef.value = audioContext;
-    const source = audioContext.createMediaStreamSource(stream);
-    const analyser = audioContext.createAnalyser();
-    analyser.fftSize = 2048;
-    source.connect(analyser);
-    analyserRef.value = analyser;
-
-    const mimeType = MediaRecorder.isTypeSupported("audio/webm;codecs=opus")
-      ? "audio/webm;codecs=opus"
-      : MediaRecorder.isTypeSupported("audio/webm")
-        ? "audio/webm"
-        : MediaRecorder.isTypeSupported("audio/mp4")
-          ? "audio/mp4"
-          : "";
-
-    const options = mimeType ? { mimeType } : {};
-    const recorder = new MediaRecorder(stream, options);
-    mediaRecorderRef.value = recorder;
-    audioChunksRef.value = [];
-
-    recorder.ondataavailable = (event) => {
-      if (event.data.size > 0) {
-        audioChunksRef.value.push(event.data);
-      }
-    };
-
-    recorder.start(100);
-    recorderState.value = "recording";
-  } catch (error) {
-    cleanup();
-    if (error instanceof Error && error.name === "NotAllowedError") {
-      throw new AudioRecorderError("Microphone permission denied");
-    }
-    if (error instanceof Error && error.name === "NotFoundError") {
-      throw new AudioRecorderError("No microphone found");
-    }
-    throw new AudioRecorderError(
-      error instanceof Error ? error.message : "Failed to start recording",
-    );
-  }
-}
-
-function stop() {
-  return new Promise<Blob>((resolve, reject) => {
-    const recorder = mediaRecorderRef.value;
-    if (!recorder || recorderState.value !== "recording") {
-      reject(new AudioRecorderError("No active recording"));
-      return;
-    }
-
-    recorderState.value = "processing";
-    recorder.onstop = () => {
-      const audioBlob = new Blob(audioChunksRef.value, {
-        type: recorder.mimeType || "audio/webm",
-      });
-      cleanup();
-      recorderState.value = "idle";
-      resolve(audioBlob);
-    };
-    recorder.onerror = () => {
-      cleanup();
-      recorderState.value = "idle";
-      reject(new AudioRecorderError("Recording failed"));
-    };
-    recorder.stop();
-  });
-}
-
-function calculateAmplitude(dataArray: Uint8Array) {
-  let sum = 0;
-  for (let index = 0; index < dataArray.length; index += 1) {
-    const sample = (dataArray[index] ?? 128) / 128 - 1;
-    sum += sample * sample;
-  }
-  return Math.sqrt(sum / dataArray.length);
-}
-
-function drawFrame() {
-  const canvas = canvasRef.value;
-  if (!canvas) {
-    return;
-  }
-
-  const context = canvas.getContext("2d");
-  if (!context) {
-    return;
-  }
-
-  const rect = canvas.getBoundingClientRect();
-  const dpr = window.devicePixelRatio || 1;
-  if (
-    canvas.width !== rect.width * dpr ||
-    canvas.height !== rect.height * dpr
-  ) {
-    canvas.width = rect.width * dpr;
-    canvas.height = rect.height * dpr;
-    context.scale(dpr, dpr);
-  }
-
-  const barWidth = 2;
-  const barGap = 1;
-  const barSpacing = barWidth + barGap;
-  const maxBars = Math.floor(rect.width / barSpacing) + 2;
-
-  if (analyserRef.value && recorderState.value === "recording") {
-    if (amplitudeHistoryRef.value.length === 0) {
-      amplitudeHistoryRef.value = Array.from({ length: maxBars }, () => 0);
-    }
-
-    if (fadeOpacityRef.value < 1) {
-      fadeOpacityRef.value = Math.min(1, fadeOpacityRef.value + 0.03);
-    }
-
-    scrollOffsetRef.value += 1 / 3;
-    const bufferLength = analyserRef.value.fftSize;
-    const dataArray = new Uint8Array(bufferLength);
-    analyserRef.value.getByteTimeDomainData(dataArray);
-    const rawAmplitude = calculateAmplitude(dataArray);
-    const attackSpeed = 0.12;
-    const decaySpeed = 0.08;
-    const speed =
-      rawAmplitude > smoothedAmplitudeRef.value ? attackSpeed : decaySpeed;
-    smoothedAmplitudeRef.value +=
-      (rawAmplitude - smoothedAmplitudeRef.value) * speed;
-
-    if (scrollOffsetRef.value >= barSpacing) {
-      scrollOffsetRef.value -= barSpacing;
-      amplitudeHistoryRef.value.push(smoothedAmplitudeRef.value);
-      if (amplitudeHistoryRef.value.length > maxBars) {
-        amplitudeHistoryRef.value = amplitudeHistoryRef.value.slice(-maxBars);
-      }
-    }
-  }
-
-  context.clearRect(0, 0, rect.width, rect.height);
-  const computedStyle = window.getComputedStyle(canvas);
-  context.fillStyle = computedStyle.color;
-  context.globalAlpha = fadeOpacityRef.value;
-
-  const centerY = rect.height / 2;
-  const maxAmplitude = rect.height / 2 - 2;
-  const edgeFadeWidth = 12;
-
-  for (let index = 0; index < amplitudeHistoryRef.value.length; index += 1) {
-    const amplitude = amplitudeHistoryRef.value[index] ?? 0;
-    const scaledAmplitude = Math.min(amplitude * 4, 1);
-    const barHeight = Math.max(2, scaledAmplitude * maxAmplitude * 2);
-    const x =
-      rect.width -
-      (amplitudeHistoryRef.value.length - index) * barSpacing -
-      scrollOffsetRef.value;
-    const y = centerY - barHeight / 2;
-    if (x + barWidth <= 0 || x >= rect.width) {
-      continue;
-    }
-
-    let edgeOpacity = 1;
-    if (x < edgeFadeWidth) {
-      edgeOpacity = Math.max(0, x / edgeFadeWidth);
-    } else if (x > rect.width - edgeFadeWidth) {
-      edgeOpacity = Math.max(0, (rect.width - x) / edgeFadeWidth);
-    }
-
-    context.globalAlpha = fadeOpacityRef.value * edgeOpacity;
-    context.fillRect(x, y, barWidth, barHeight);
-  }
-
-  animationIdRef.value = requestAnimationFrame(drawFrame);
-}
-
-watch(
-  recorderState,
-  () => {
-    if (animationIdRef.value !== null) {
-      cancelAnimationFrame(animationIdRef.value);
-      animationIdRef.value = null;
-    }
-    animationIdRef.value = requestAnimationFrame(drawFrame);
-  },
-  { immediate: true },
-);
+});
 
 onBeforeUnmount(() => {
-  cleanup();
+  waveform?.dispose();
+  recorder.dispose();
 });
 
 defineExpose({
   get state() {
-    return recorderState.value;
+    return recorder.getSnapshot();
   },
-  start,
-  stop,
-  dispose: cleanup,
+  start: () => recorder.start(),
+  stop: () => recorder.stop(),
+  dispose: () => recorder.dispose(),
 });
 </script>
 

package/src/v2/components/chat/CopilotChatFeedbackCommentPopover.vue

@@ -12,8 +12,11 @@
 import { computed, nextTick, ref, watch } from "vue";
 import { useCopilotChatConfiguration } from "../../providers/useCopilotChatConfiguration";
 import { CopilotChatDefaultLabels } from "../../providers/types";
-import { MESSAGE_FEEDBACK_MAX_COMMENT_LENGTH } from "../../lib/message-feedback";
-import type { MessageFeedbackRating } from "../../lib/message-feedback";
+import {
+  ɵMESSAGE_FEEDBACK_MAX_COMMENT_LENGTH as MESSAGE_FEEDBACK_MAX_COMMENT_LENGTH,
+  ɵisOwnFeedbackThumb,
+} from "@copilotkit/core";
+import type { ɵMessageFeedbackRating as MessageFeedbackRating } from "@copilotkit/core";
 import CopilotPopover from "../ui/CopilotPopover.vue";
 import { IconArrowUp } from "../icons";
 import type { FeedbackComment } from "./message-feedback";
@@ -38,60 +41,13 @@ const labels = computed(() => config.value?.labels ?? CopilotChatDefaultLabels);
 const popover = ref<{ content: HTMLElement | null } | null>(null);
 const contentElement = () => popover.value?.content ?? null;
 
-// Elements Tab stops at.
-const FOCUSABLE = [
-  "a[href]",
-  "button:not([disabled])",
-  "input:not([disabled])",
-  "select:not([disabled])",
-  "textarea:not([disabled])",
-  "[tabindex]",
-]
-  .map((selector) => `${selector}:not([tabindex="-1"])`)
-  .join(", ");
-
-/** Approximately the element Tab reaches after `element`, outside `skip`. */
-function nextFocusable(
-  element: Element,
-  skip: Element | null,
-): HTMLElement | null {
-  const all = Array.from(
-    element.ownerDocument.querySelectorAll<HTMLElement>(FOCUSABLE),
-  ).filter(
-    (candidate) =>
-      candidate === element ||
-      (!skip?.contains(candidate) && !candidate.closest("[hidden], [inert]")),
-  );
-  const index = all.indexOf(element as HTMLElement);
-  return index === -1 ? null : (all[index + 1] ?? null);
-}
-
-const focusInside = () =>
-  contentElement()?.contains(document.activeElement) ?? false;
-
-/** Whether `target` is a thumb of this message, whose click decides itself. */
-const isOwnThumb = (target: EventTarget | null) => {
-  const thumb =
-    target instanceof Element
-      ? target.closest("[data-copilotkit-rating]")
-      : null;
-  return (
-    thumb?.closest("[data-message-id]")?.getAttribute("data-message-id") ===
-    props.messageId
-  );
-};
-
 // A keyboard rating moves focus into the field, as the popover opens or, when
 // it was open already, as the field for the new rating renders.
-const focusField = () => {
-  const input = props.comment.input.value;
-  if (input && props.comment.takeFocusRequest()) input.focus();
-};
 watch(
   () => [props.comment.focusRequest.value, props.comment.open.value],
   async () => {
     await nextTick();
-    focusField();
+    props.comment.focusField();
   },
   // Immediate: the popover mounts as it opens, after the request was made.
   { flush: "post", immediate: true },
@@ -107,43 +63,25 @@ const changed = computed(
 );
 
 function onEscape(event: KeyboardEvent) {
-  const returnFocus = focusInside();
   // Escape in the comment closes only the comment, not a chat popup around
   // it; with focus elsewhere it also reaches that control.
-  if (returnFocus) event.stopPropagation();
+  if (props.comment.popoverEscape(contentElement())) event.stopPropagation();
   event.preventDefault();
-  props.comment.close({ save: false });
-  if (returnFocus) props.comment.returnFocus(props.anchor);
 }
 
 function onInteractOutside(event: Event) {
   // A click on a thumb removes or switches the rating, so closing must not
   // first save the draft as the answer to the rating it replaces.
-  if (isOwnThumb(event.target)) event.preventDefault();
+  if (ɵisOwnFeedbackThumb(event.target, props.messageId))
+    event.preventDefault();
 }
 
 function onKeyDown(event: KeyboardEvent) {
-  if (event.key !== "Tab") return;
-  const focusables = Array.from(
-    contentElement()?.querySelectorAll<HTMLElement>(FOCUSABLE) ?? [],
-  );
-  const leaving = event.shiftKey
-    ? document.activeElement === focusables[0]
-    : document.activeElement === focusables[focusables.length - 1];
-  const anchor = props.anchor;
-  if (!leaving || !anchor?.isConnected) return;
-  event.preventDefault();
-  const target = event.shiftKey
-    ? anchor
-    : (nextFocusable(anchor, contentElement()) ?? anchor);
-  props.comment.close();
-  if (target === anchor) props.comment.returnFocus(target);
-  else target.focus();
+  props.comment.popoverKeyDown(event, contentElement());
 }
 
 function onSubmit() {
-  props.comment.close();
-  props.comment.returnFocus(props.anchor);
+  props.comment.submit();
 }
 
 function onEditingChange(editing: boolean) {
@@ -151,10 +89,7 @@ function onEditingChange(editing: boolean) {
 }
 
 function onLeave(next: Element | null) {
-  // Focus moving within the popover or to a thumb, which the pointer is
-  // still on, does not close it.
-  if (next && (contentElement()?.contains(next) || isOwnThumb(next))) return;
-  props.comment.leave();
+  props.comment.popoverFocusLeave(next, contentElement(), props.messageId);
 }
 
 function onFormFocusOut(event: FocusEvent) {