@copilotkitnext/react 0.0.3 → 0.0.4

package/src/components/chat/CopilotChatAssistantMessage.tsx

@@ -1,478 +0,0 @@
-import { AssistantMessage, Message } from "@ag-ui/core";
-import { MarkdownHooks } from "react-markdown";
-import remarkGfm from "remark-gfm";
-import remarkMath from "remark-math";
-import rehypePrettyCode from "rehype-pretty-code";
-import rehypeKatex from "rehype-katex";
-import { useState } from "react";
-import {
-  Copy,
-  Check,
-  ThumbsUp,
-  ThumbsDown,
-  Volume2,
-  RefreshCw,
-} from "lucide-react";
-import { cn } from "@/lib/utils";
-import { useCopilotChatConfiguration } from "@/providers/CopilotChatConfigurationProvider";
-import { twMerge } from "tailwind-merge";
-import { Button } from "@/components/ui/button";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-import "katex/dist/katex.min.css";
-import { WithSlots, renderSlot } from "@/lib/slots";
-import { completePartialMarkdown } from "@copilotkitnext/core";
-import CopilotChatToolCallsView from "./CopilotChatToolCallsView";
-
-export type CopilotChatAssistantMessageProps = WithSlots<
-  {
-    markdownRenderer: typeof CopilotChatAssistantMessage.MarkdownRenderer;
-    toolbar: typeof CopilotChatAssistantMessage.Toolbar;
-    copyButton: typeof CopilotChatAssistantMessage.CopyButton;
-    thumbsUpButton: typeof CopilotChatAssistantMessage.ThumbsUpButton;
-    thumbsDownButton: typeof CopilotChatAssistantMessage.ThumbsDownButton;
-    readAloudButton: typeof CopilotChatAssistantMessage.ReadAloudButton;
-    regenerateButton: typeof CopilotChatAssistantMessage.RegenerateButton;
-    toolCallsView: typeof CopilotChatToolCallsView;
-  },
-  {
-    onThumbsUp?: (message: AssistantMessage) => void;
-    onThumbsDown?: (message: AssistantMessage) => void;
-    onReadAloud?: (message: AssistantMessage) => void;
-    onRegenerate?: (message: AssistantMessage) => void;
-    message: AssistantMessage;
-    messages?: Message[];
-    isLoading?: boolean;
-    additionalToolbarItems?: React.ReactNode;
-    toolbarVisible?: boolean;
-  } & React.HTMLAttributes<HTMLDivElement>
->;
-
-export function CopilotChatAssistantMessage({
-  message,
-  messages,
-  isLoading,
-  onThumbsUp,
-  onThumbsDown,
-  onReadAloud,
-  onRegenerate,
-  additionalToolbarItems,
-  toolbarVisible = true,
-  markdownRenderer,
-  toolbar,
-  copyButton,
-  thumbsUpButton,
-  thumbsDownButton,
-  readAloudButton,
-  regenerateButton,
-  toolCallsView,
-  children,
-  className,
-  ...props
-}: CopilotChatAssistantMessageProps) {
-  const boundMarkdownRenderer = renderSlot(
-    markdownRenderer,
-    CopilotChatAssistantMessage.MarkdownRenderer,
-    {
-      content: message.content || "",
-    }
-  );
-
-  const boundCopyButton = renderSlot(
-    copyButton,
-    CopilotChatAssistantMessage.CopyButton,
-    {
-      onClick: async () => {
-        if (message.content) {
-          try {
-            await navigator.clipboard.writeText(message.content);
-          } catch (err) {
-            console.error("Failed to copy message:", err);
-          }
-        }
-      },
-    }
-  );
-
-  const boundThumbsUpButton = renderSlot(
-    thumbsUpButton,
-    CopilotChatAssistantMessage.ThumbsUpButton,
-    {
-      onClick: onThumbsUp,
-    }
-  );
-
-  const boundThumbsDownButton = renderSlot(
-    thumbsDownButton,
-    CopilotChatAssistantMessage.ThumbsDownButton,
-    {
-      onClick: onThumbsDown,
-    }
-  );
-
-  const boundReadAloudButton = renderSlot(
-    readAloudButton,
-    CopilotChatAssistantMessage.ReadAloudButton,
-    {
-      onClick: onReadAloud,
-    }
-  );
-
-  const boundRegenerateButton = renderSlot(
-    regenerateButton,
-    CopilotChatAssistantMessage.RegenerateButton,
-    {
-      onClick: onRegenerate,
-    }
-  );
-
-  const boundToolbar = renderSlot(
-    toolbar,
-    CopilotChatAssistantMessage.Toolbar,
-    {
-      children: (
-        <div className="flex items-center gap-1">
-          {boundCopyButton}
-          {(onThumbsUp || thumbsUpButton) && boundThumbsUpButton}
-          {(onThumbsDown || thumbsDownButton) && boundThumbsDownButton}
-          {(onReadAloud || readAloudButton) && boundReadAloudButton}
-          {(onRegenerate || regenerateButton) && boundRegenerateButton}
-          {additionalToolbarItems}
-        </div>
-      ),
-    }
-  );
-
-  const boundToolCallsView = renderSlot(
-    toolCallsView,
-    CopilotChatToolCallsView,
-    {
-      message,
-      messages,
-      isLoading,
-    }
-  );
-
-  if (children) {
-    return (
-      <>
-        {children({
-          markdownRenderer: boundMarkdownRenderer,
-          toolbar: boundToolbar,
-          toolCallsView: boundToolCallsView,
-          copyButton: boundCopyButton,
-          thumbsUpButton: boundThumbsUpButton,
-          thumbsDownButton: boundThumbsDownButton,
-          readAloudButton: boundReadAloudButton,
-          regenerateButton: boundRegenerateButton,
-          message,
-          messages,
-          isLoading,
-          onThumbsUp,
-          onThumbsDown,
-          onReadAloud,
-          onRegenerate,
-          additionalToolbarItems,
-          toolbarVisible,
-        })}
-      </>
-    );
-  }
-
-  return (
-    <div
-      className={twMerge(
-        "prose max-w-full break-words dark:prose-invert",
-        className
-      )}
-      {...props}
-      data-message-id={message.id}
-    >
-      {boundMarkdownRenderer}
-      {boundToolCallsView}
-      {toolbarVisible && boundToolbar}
-    </div>
-  );
-}
-
-// eslint-disable-next-line @typescript-eslint/no-namespace
-export namespace CopilotChatAssistantMessage {
-  const InlineCode = ({
-    children,
-    ...props
-  }: React.HTMLAttributes<HTMLElement>) => {
-    return (
-      <code
-        className="px-[4.8px] py-[2.5px] bg-[rgb(236,236,236)] dark:bg-gray-800 rounded text-sm font-mono font-medium! text-foreground!"
-        {...props}
-      >
-        {children}
-      </code>
-    );
-  };
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const CodeBlock = ({ children, className, onClick, ...props }: any) => {
-    const { labels } = useCopilotChatConfiguration();
-    const [copied, setCopied] = useState(false);
-
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const getCodeContent = (node: any): string => {
-      if (typeof node === "string") return node;
-      if (Array.isArray(node)) return node.map(getCodeContent).join("");
-      if (node?.props?.children) return getCodeContent(node.props.children);
-      return "";
-    };
-
-    const codeContent = getCodeContent(children);
-    const language = props["data-language"] as string | undefined;
-
-    const copyToClipboard = async () => {
-      if (!codeContent.trim()) return;
-
-      try {
-        setCopied(true);
-        setTimeout(() => setCopied(false), 2000);
-        if (onClick) {
-          onClick();
-        }
-      } catch (err) {
-        console.error("Failed to copy code:", err);
-      }
-    };
-
-    return (
-      <div className="relative">
-        <div className="flex items-center justify-between px-4 pr-3 py-3 text-xs">
-          {language && (
-            <span className="font-regular text-muted-foreground dark:text-white">
-              {language}
-            </span>
-          )}
-
-          <button
-            className={cn(
-              "px-2 gap-0.5 text-xs flex items-center cursor-pointer text-muted-foreground dark:text-white"
-            )}
-            onClick={copyToClipboard}
-            title={
-              copied
-                ? labels.assistantMessageToolbarCopyCodeCopiedLabel
-                : `${labels.assistantMessageToolbarCopyCodeLabel} code`
-            }
-          >
-            {copied ? (
-              <Check className="h-[10px]! w-[10px]!" />
-            ) : (
-              <Copy className="h-[10px]! w-[10px]!" />
-            )}
-            <span className="text-[11px]">
-              {copied
-                ? labels.assistantMessageToolbarCopyCodeCopiedLabel
-                : labels.assistantMessageToolbarCopyCodeLabel}
-            </span>
-          </button>
-        </div>
-
-        <pre
-          className={cn(
-            className,
-            "rounded-2xl bg-transparent border-t-0 my-1!"
-          )}
-          {...props}
-        >
-          {children}
-        </pre>
-      </div>
-    );
-  };
-
-  export const MarkdownRenderer: React.FC<
-    React.HTMLAttributes<HTMLDivElement> & { content: string }
-  > = ({ content, className }) => (
-    <div className={className}>
-      <MarkdownHooks
-        /* async plugins are now fine ✨ */
-        remarkPlugins={[remarkGfm, remarkMath]}
-        rehypePlugins={[
-          [
-            rehypePrettyCode,
-            {
-              keepBackground: false,
-              theme: {
-                dark: "one-dark-pro",
-                light: "one-light",
-              },
-              bypassInlineCode: true,
-            },
-          ],
-          rehypeKatex,
-        ]}
-        components={{
-          pre: CodeBlock,
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          code: ({ className, children, ...props }: any) => {
-            // For inline code, use custom styling
-            if (typeof children === "string") {
-              return <InlineCode {...props}>{children}</InlineCode>;
-            }
-
-            // For code blocks, just return the code element as-is
-            return (
-              <code className={className} {...props}>
-                {children}
-              </code>
-            );
-          },
-        }}
-      >
-        {completePartialMarkdown(content || "")}
-      </MarkdownHooks>
-    </div>
-  );
-
-  export const Toolbar: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
-    className,
-    ...props
-  }) => (
-    <div
-      className={twMerge(
-        "w-full bg-transparent flex items-center -ml-[5px] -mt-[0px]",
-        className
-      )}
-      {...props}
-    />
-  );
-
-  export const ToolbarButton: React.FC<
-    React.ButtonHTMLAttributes<HTMLButtonElement> & {
-      title: string;
-      children: React.ReactNode;
-    }
-  > = ({ title, children, ...props }) => {
-    return (
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <Button
-            type="button"
-            variant="assistantMessageToolbarButton"
-            aria-label={title}
-            {...props}
-          >
-            {children}
-          </Button>
-        </TooltipTrigger>
-        <TooltipContent side="bottom">
-          <p>{title}</p>
-        </TooltipContent>
-      </Tooltip>
-    );
-  };
-
-  export const CopyButton: React.FC<
-    React.ButtonHTMLAttributes<HTMLButtonElement>
-  > = ({ className, title, onClick, ...props }) => {
-    const { labels } = useCopilotChatConfiguration();
-    const [copied, setCopied] = useState(false);
-
-    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-
-      if (onClick) {
-        onClick(event);
-      }
-    };
-
-    return (
-      <ToolbarButton
-        title={title || labels.assistantMessageToolbarCopyMessageLabel}
-        onClick={handleClick}
-        className={className}
-        {...props}
-      >
-        {copied ? (
-          <Check className="size-[18px]" />
-        ) : (
-          <Copy className="size-[18px]" />
-        )}
-      </ToolbarButton>
-    );
-  };
-
-  export const ThumbsUpButton: React.FC<
-    React.ButtonHTMLAttributes<HTMLButtonElement>
-  > = ({ title, ...props }) => {
-    const { labels } = useCopilotChatConfiguration();
-    return (
-      <ToolbarButton
-        title={title || labels.assistantMessageToolbarThumbsUpLabel}
-        {...props}
-      >
-        <ThumbsUp className="size-[18px]" />
-      </ToolbarButton>
-    );
-  };
-
-  export const ThumbsDownButton: React.FC<
-    React.ButtonHTMLAttributes<HTMLButtonElement>
-  > = ({ title, ...props }) => {
-    const { labels } = useCopilotChatConfiguration();
-    return (
-      <ToolbarButton
-        title={title || labels.assistantMessageToolbarThumbsDownLabel}
-        {...props}
-      >
-        <ThumbsDown className="size-[18px]" />
-      </ToolbarButton>
-    );
-  };
-
-  export const ReadAloudButton: React.FC<
-    React.ButtonHTMLAttributes<HTMLButtonElement>
-  > = ({ title, ...props }) => {
-    const { labels } = useCopilotChatConfiguration();
-    return (
-      <ToolbarButton
-        title={title || labels.assistantMessageToolbarReadAloudLabel}
-        {...props}
-      >
-        <Volume2 className="size-[20px]" />
-      </ToolbarButton>
-    );
-  };
-
-  export const RegenerateButton: React.FC<
-    React.ButtonHTMLAttributes<HTMLButtonElement>
-  > = ({ title, ...props }) => {
-    const { labels } = useCopilotChatConfiguration();
-    return (
-      <ToolbarButton
-        title={title || labels.assistantMessageToolbarRegenerateLabel}
-        {...props}
-      >
-        <RefreshCw className="size-[18px]" />
-      </ToolbarButton>
-    );
-  };
-}
-
-CopilotChatAssistantMessage.MarkdownRenderer.displayName =
-  "CopilotChatAssistantMessage.MarkdownRenderer";
-CopilotChatAssistantMessage.Toolbar.displayName =
-  "CopilotChatAssistantMessage.Toolbar";
-CopilotChatAssistantMessage.CopyButton.displayName =
-  "CopilotChatAssistantMessage.CopyButton";
-CopilotChatAssistantMessage.ThumbsUpButton.displayName =
-  "CopilotChatAssistantMessage.ThumbsUpButton";
-CopilotChatAssistantMessage.ThumbsDownButton.displayName =
-  "CopilotChatAssistantMessage.ThumbsDownButton";
-CopilotChatAssistantMessage.ReadAloudButton.displayName =
-  "CopilotChatAssistantMessage.ReadAloudButton";
-CopilotChatAssistantMessage.RegenerateButton.displayName =
-  "CopilotChatAssistantMessage.RegenerateButton";
-
-export default CopilotChatAssistantMessage;

package/src/components/chat/CopilotChatAudioRecorder.tsx

@@ -1,157 +0,0 @@
-import { useRef, useEffect, useImperativeHandle, forwardRef } from "react";
-import { twMerge } from "tailwind-merge";
-
-/** Finite-state machine for every recorder implementation */
-export type AudioRecorderState = "idle" | "recording" | "processing";
-
-/** Error subclass so callers can `instanceof`-guard recorder failures */
-export class AudioRecorderError extends Error {
-  constructor(message: string) {
-    super(message);
-    this.name = "AudioRecorderError";
-  }
-}
-
-export const CopilotChatAudioRecorder = forwardRef<
-  any,
-  React.HTMLAttributes<HTMLDivElement>
->((props, ref) => {
-  const { className, ...divProps } = props;
-  const canvasRef = useRef<HTMLCanvasElement>(null);
-
-  // Generate fake waveform that moves with time
-  const getLoudness = (n: number): number[] => {
-    const elapsed = Date.now() / 1000; // Use current timestamp directly
-    const samples: number[] = [];
-
-    for (let i = 0; i < n; i++) {
-      // Create a position that moves from left to right over time
-      const position = (i / n) * 10 + elapsed * 0.5; // Scroll speed (slower)
-
-      // Generate waveform using multiple sine waves for realism
-      const wave1 = Math.sin(position * 2) * 0.3;
-      const wave2 = Math.sin(position * 5 + elapsed) * 0.2;
-      const wave3 = Math.sin(position * 0.5 + elapsed * 0.3) * 0.4;
-
-      // Add some randomness for natural variation
-      const noise = (Math.random() - 0.5) * 0.1;
-
-      // Combine waves and add envelope for realistic amplitude variation
-      const envelope = Math.sin(elapsed * 0.7) * 0.5 + 0.5; // Slow amplitude modulation
-      let amplitude = (wave1 + wave2 + wave3 + noise) * envelope;
-
-      // Clamp to 0-1 range
-      amplitude = Math.max(0, Math.min(1, amplitude * 0.5 + 0.3));
-
-      samples.push(amplitude);
-    }
-
-    return samples;
-  };
-
-  // No setup needed - stub implementation
-
-  // Canvas rendering with 60fps animation
-  useEffect(() => {
-    const canvas = canvasRef.current;
-    if (!canvas) return;
-
-    const ctx = canvas.getContext("2d");
-    if (!ctx) return;
-
-    let animationId: number;
-
-    const draw = () => {
-      const rect = canvas.getBoundingClientRect();
-      const dpr = window.devicePixelRatio || 1;
-
-      // Update canvas dimensions if container resized
-      if (
-        canvas.width !== rect.width * dpr ||
-        canvas.height !== rect.height * dpr
-      ) {
-        canvas.width = rect.width * dpr;
-        canvas.height = rect.height * dpr;
-        ctx.scale(dpr, dpr);
-        ctx.imageSmoothingEnabled = false;
-      }
-
-      // Configuration
-      const barWidth = 2;
-      const minHeight = 2;
-      const maxHeight = 20;
-      const gap = 2;
-      const numSamples = Math.ceil(rect.width / (barWidth + gap));
-
-      // Get loudness data
-      const loudnessData = getLoudness(numSamples);
-
-      // Clear canvas
-      ctx.clearRect(0, 0, rect.width, rect.height);
-
-      // Get current foreground color
-      const computedStyle = getComputedStyle(canvas);
-      const currentForeground = computedStyle.color;
-
-      // Draw bars
-      ctx.fillStyle = currentForeground;
-      const centerY = rect.height / 2;
-
-      for (let i = 0; i < loudnessData.length; i++) {
-        const sample = loudnessData[i] ?? 0;
-        const barHeight = Math.round(
-          sample * (maxHeight - minHeight) + minHeight
-        );
-        const x = Math.round(i * (barWidth + gap));
-        const y = Math.round(centerY - barHeight / 2);
-
-        ctx.fillRect(x, y, barWidth, barHeight);
-      }
-
-      animationId = requestAnimationFrame(draw);
-    };
-
-    draw();
-
-    return () => {
-      if (animationId) {
-        cancelAnimationFrame(animationId);
-      }
-    };
-  }, []);
-
-  // Expose AudioRecorder API
-  useImperativeHandle(
-    ref,
-    () => ({
-      get state() {
-        return "idle" as AudioRecorderState;
-      },
-      start: async () => {
-        // Stub implementation - no actual recording
-      },
-      stop: () =>
-        new Promise<Blob>((resolve) => {
-          // Stub implementation - return empty blob
-          const emptyBlob = new Blob([], { type: "audio/webm" });
-          resolve(emptyBlob);
-        }),
-      dispose: () => {
-        // No cleanup needed
-      },
-    }),
-    []
-  );
-
-  return (
-    <div className={twMerge("h-[44px] w-full px-5", className)} {...divProps}>
-      <canvas
-        ref={canvasRef}
-        className="w-full h-full"
-        style={{ imageRendering: "pixelated" }}
-      />
-    </div>
-  );
-});
-
-CopilotChatAudioRecorder.displayName = "WebAudioRecorder";