// @ts-nocheck
// =====================================================================
// Plaaayground v2 -- Streaming Message Component
// PLAY-83: Streaming UI Enhancement
// Renders AI response as it streams in with:
//   - Character-by-character feel (content reveals progressively)
//   - Blinking cursor at end of streaming text
//   - "Updating board..." indicator when board actions detected mid-stream
//   - Board action badges after stream completes
// DD: spring animations, reduced motion support
// =====================================================================

import { useMemo } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { Loader2 } from "lucide-react";
import { cn } from "@/lib/utils";
import { spring, useReducedMotion } from "@/lib/motion";
import { hasPartialBoardActions, hasCompleteBoardActions } from "@/lib/boardActions";
import type { BoardAction } from "@/types/chat";

// -- Types ---------------------------------------------------------------

interface StreamingMessageProps {
  /** The streaming content so far */
  content: string;
  /** Whether the stream is still active */
  isStreaming: boolean;
  /** Board actions detected after stream completes (for badge display) */
  boardActions?: BoardAction[];
  /** Additional class names */
  className?: string;
}

// -- Helpers -------------------------------------------------------------

/** Strip any board_actions code blocks from display content */
function cleanDisplayContent(content: string): string {
  // Remove complete board_actions blocks
  let cleaned = content.replace(/```board_actions\n[\s\S]*?\n```/g, "");
  // Remove partial (still-streaming) board_actions blocks
  const partialIdx = cleaned.indexOf("```board_actions");
  if (partialIdx !== -1) {
    cleaned = cleaned.slice(0, partialIdx);
  }
  return cleaned.trim();
}

/** Very basic markdown-like formatting matching ChatPanel's renderContent */
function renderContent(content: string) {
  const lines = content.split("\n");
  const elements: React.ReactNode[] = [];

  for (let i = 0; i < lines.length; i++) {
    const line = lines[i];

    if (/^[-*]\s/.test(line)) {
      const text = line.replace(/^[-*]\s/, "");
      elements.push(
        <div key={i} className="flex gap-1.5 items-start">
          <span className="mt-[7px] w-1 h-1 rounded-full bg-current shrink-0 opacity-40" />
          <span>{renderInline(text)}</span>
        </div>
      );
    } else if (line.trim() === "") {
      elements.push(<div key={i} className="h-2" />);
    } else {
      elements.push(<p key={i}>{renderInline(line)}</p>);
    }
  }

  return elements;
}

function renderInline(text: string): React.ReactNode {
  const parts = text.split(/(\*\*[^*]+\*\*)/g);
  return parts.map((part, i) => {
    if (part.startsWith("**") && part.endsWith("**")) {
      return (
        <strong key={i} className="font-semibold">
          {part.slice(2, -2)}
        </strong>
      );
    }
    return part;
  });
}

// -- Blinking Cursor -----------------------------------------------------

function StreamingCursor() {
  return (
    <motion.span
      className="inline-block w-[2px] h-[14px] bg-[#0000FF] ml-0.5 align-middle rounded-full"
      animate={{ opacity: [1, 0] }}
      transition={{
        duration: 0.8,
        repeat: Infinity,
        repeatType: "reverse",
        ease: "easeInOut",
      }}
      aria-hidden="true"
    />
  );
}

// -- Board Updating Indicator -------------------------------------------

function BoardUpdatingIndicator() {
  const reducedMotion = useReducedMotion();

  return (
    <motion.div
      initial={reducedMotion ? { opacity: 0 } : { opacity: 0, y: 4 }}
      animate={reducedMotion ? { opacity: 1 } : { opacity: 1, y: 0 }}
      exit={reducedMotion ? { opacity: 0 } : { opacity: 0, y: -4 }}
      transition={spring.snappy}
      className="flex items-center gap-1.5 mt-2 px-2 py-1 bg-[#0000FF]/[0.06]"
    >
      <Loader2 className="w-3 h-3 text-[#0000FF] animate-spin" />
      <span className="text-[11px] font-medium text-[#0000FF]">
        Updating board...
      </span>
    </motion.div>
  );
}

// -- Board Action Badges (post-stream) ----------------------------------

function summarizeBoardActions(actions: BoardAction[]): string[] {
  const grouped = new Map<string, number>();
  for (const a of actions) {
    grouped.set(a.type, (grouped.get(a.type) ?? 0) + 1);
  }

  const labels: string[] = [];
  for (const [type, count] of grouped) {
    switch (type) {
      case "add_card":
        labels.push(count === 1 ? "Added 1 card" : `Added ${count} cards`);
        break;
      case "remove_card":
        labels.push(count === 1 ? "Removed 1 card" : `Removed ${count} cards`);
        break;
      case "update_card":
        labels.push(count === 1 ? "Updated 1 card" : `Updated ${count} cards`);
        break;
      case "move_card":
        labels.push(count === 1 ? "Moved 1 card" : `Moved ${count} cards`);
        break;
      case "add_task":
        labels.push(count === 1 ? "Added 1 task" : `Added ${count} tasks`);
        break;
      case "complete_task":
        labels.push(count === 1 ? "Completed 1 task" : `Completed ${count} tasks`);
        break;
      default:
        labels.push(`${count} action${count > 1 ? "s" : ""}`);
    }
  }
  return labels;
}

function BoardActionBadges({ actions }: { actions: BoardAction[] }) {
  const labels = summarizeBoardActions(actions);
  if (labels.length === 0) return null;

  return (
    <motion.div
      initial={{ opacity: 0, y: 4 }}
      animate={{ opacity: 1, y: 0 }}
      transition={spring.snappy}
      className="flex flex-wrap gap-1.5 mt-1.5"
    >
      {labels.map((label, i) => (
        <span
          key={i}
          className="inline-flex items-center gap-1 px-2 py-0.5 text-[11px] font-medium bg-[#0000FF]/[0.08] text-[#0000FF]"
        >
          {label}
        </span>
      ))}
    </motion.div>
  );
}

// -- Main Component ------------------------------------------------------

export function StreamingMessage({
  content,
  isStreaming,
  boardActions,
  className,
}: StreamingMessageProps) {
  const reducedMotion = useReducedMotion();

  // Clean content for display (strip board_actions blocks)
  const displayContent = useMemo(() => cleanDisplayContent(content), [content]);

  // Detect board actions in the stream
  const hasBoardActionsInStream = useMemo(
    () => hasPartialBoardActions(content) && !hasCompleteBoardActions(content),
    [content]
  );

  // Stream is done and we have completed board actions
  const streamComplete = !isStreaming;
  const showBoardBadges =
    streamComplete && boardActions && boardActions.length > 0;

  return (
    <motion.div
      initial={reducedMotion ? { opacity: 0 } : { opacity: 0, y: 8 }}
      animate={reducedMotion ? { opacity: 1 } : { opacity: 1, y: 0 }}
      transition={reducedMotion ? { duration: 0.01 } : spring.snappy}
      className={cn("flex flex-col max-w-[85%] self-start", className)}
    >
      {/* Message bubble */}
      <div className="bg-[#F5F5F5] text-[#1F1F1F] px-3.5 py-2.5 text-[13px] leading-relaxed">
        {displayContent.length > 0 ? (
          <>
            {renderContent(displayContent)}
            {/* Blinking cursor while streaming */}
            {isStreaming && <StreamingCursor />}
          </>
        ) : isStreaming ? (
          /* Empty content but streaming — show typing dots */
          <div className="flex items-center gap-1 py-0.5">
            {[0, 1, 2].map((i) => (
              <motion.div
                key={i}
                className="w-[6px] h-[6px] rounded-full bg-[#A3A3A3]"
                animate={{
                  y: [0, -4, 0],
                  opacity: [0.4, 1, 0.4],
                }}
                transition={{
                  duration: 1,
                  repeat: Infinity,
                  delay: i * 0.15,
                  ease: "easeInOut",
                }}
              />
            ))}
          </div>
        ) : null}

        {/* Board updating indicator (mid-stream) */}
        <AnimatePresence>
          {isStreaming && hasBoardActionsInStream && (
            <BoardUpdatingIndicator />
          )}
        </AnimatePresence>
      </div>

      {/* Board action badges (post-stream) */}
      <AnimatePresence>
        {showBoardBadges && <BoardActionBadges actions={boardActions!} />}
      </AnimatePresence>
    </motion.div>
  );
}

export default StreamingMessage;
StreamingMessage

Source Code
