index.tsx

import React from "react";
import { Box, Text } from "ink";
import { renderMarkdown, renderMarkdownSegments } from "./markdown";
import {
  buildThinkingSummary,
  buildToolSummary,
  formatStatusName,
  formatToolStatusParams,
  getToolDiffPreviewLines,
  getUpdatePlanPreviewLines,
} from "./utils";
import type { DiffPreviewLine, MessageViewProps } from "./types";
import { RawMode, useRawModeContext } from "../../contexts";

export function MessageView({ message, collapsed, width = 80 }: MessageViewProps): React.ReactElement | null {
  const { mode } = useRawModeContext();
  if (!message.visible) {
    return null;
  }

  if (message.role === "user") {
    const text = message.content || "(no content)";
    return (
      <Box marginLeft={1} marginBottom={1} flexDirection="row" marginY={0} flexGrow={1} gap={1}>
        <Box>
          <Text color="#229ac3">{`>`}</Text>
        </Box>
        <Box flexGrow={1}>
          <Text color="#229ac3">{text}</Text>
          {Array.isArray(message.contentParams) && message.contentParams.length > 0 ? (
            <Text color="#229ac3">{`  📎 ${message.contentParams.length} image attachment(s)`}</Text>
          ) : null}
        </Box>
      </Box>
    );
  }

  if (message.role === "assistant") {
    const isThinking = Boolean(message.meta?.asThinking);
    const content = (message.content || "").trim();

    if (isThinking) {
      const summary = buildThinkingSummary(content, message.messageParams, mode);
      if (collapsed !== false) {
        return (
          <Box marginLeft={1} marginBottom={1} marginY={0}>
            <StatusLine width={width} bulletColor="gray" name="Thinking" params={summary} />
          </Box>
        );
      }
      return (
        <Box marginLeft={1} flexDirection="column" marginBottom={1} marginY={0}>
          <StatusLine width={width} bulletColor="gray" name="Thinking" params={content ? "" : summary} />
          <Box flexDirection="column" marginLeft={2}>
            {content ? <Text dimColor>{renderMarkdown(content)}</Text> : null}
          </Box>
        </Box>
      );
    }

    const containerWidth = Math.max(1, width - 2);
    const contentWidth = Math.max(1, width - 4);

    return (
      <Box marginLeft={1} marginBottom={1} width={containerWidth} gap={1} marginY={0} flexDirection="row">
        <Box alignSelf="stretch">
          <Text color="#229ac3">✦</Text>
        </Box>
        <Box flexGrow={1} width={contentWidth} flexDirection="column">
          {content
            ? renderMarkdownSegments(content, Math.max(20, contentWidth - 4)).map((seg, i) => {
                if (seg.kind === "table") {
                  return (
                    <Box key={i} flexDirection="column">
                      {seg.body.split("\n").map((line, lineIndex) => (
                        <Text key={lineIndex} wrap="truncate-end">
                          {line}
                        </Text>
                      ))}
                    </Box>
                  );
                }
                return <Text key={i}>{seg.body}</Text>;
              })
            : null}
        </Box>
      </Box>
    );
  }

  if (message.role === "tool") {
    const summary = buildToolSummary(message);
    const diffLines = getToolDiffPreviewLines(summary);
    const planLines = getUpdatePlanPreviewLines(summary);
    return (
      <Box flexDirection="column" marginLeft={1} marginBottom={1} marginY={0}>
        <StatusLine
          width={width}
          bulletColor={summary.ok ? "green" : "red"}
          name={formatStatusName(summary.name)}
          params={formatToolStatusParams(summary)}
        />
        {diffLines.length > 0 ? <DiffPreview lines={diffLines} /> : null}
        {planLines.length > 0 ? <PlanPreview lines={planLines} /> : null}
      </Box>
    );
  }

  if (message.role === "system") {
    // Render model change messages in the same style as user commands.
    if (message.meta?.isModelChange) {
      return (
        <Box marginY={0} marginLeft={1} marginBottom={1} flexGrow={1} flexDirection="row" gap={1}>
          <Box>
            <Text color="#229ac3">{`>`}</Text>
          </Box>
          <Box flexGrow={1} flexDirection="column">
            <Text color="#229ac3">{message.content}</Text>
          </Box>
        </Box>
      );
    }

    if (message.meta?.skill) {
      return (
        <Box marginY={0} marginLeft={1} marginBottom={1}>
          <Text color="magenta">⚡ Loaded skill: {message.meta.skill.name}</Text>
        </Box>
      );
    }
    if (message.meta?.isSummary) {
      return (
        <Box marginY={0} marginLeft={1} marginBottom={1}>
          <Text dimColor italic>
            (conversation summary inserted)
          </Text>
        </Box>
      );
    }
    if (message.meta?.isSupplementary) {
      const text = (message.content || "").replace(/^\[User Supplementary Guidance\]\n?/, "");
      return (
        <Box marginLeft={1} marginBottom={1} flexDirection="column" marginY={0}>
          <Box flexDirection="row" gap={1}>
            <Text color="yellow">┌─ [Supplementary Guidance]</Text>
          </Box>
          <Box flexDirection="row" gap={1} marginLeft={2}>
            <Text color="yellow" wrap="wrap">
              {text}
            </Text>
          </Box>
        </Box>
      );
    }
    return null;
  }

  return null;
}

function StatusLine({
  bulletColor,
  name,
  params,
  width,
}: {
  bulletColor: "gray" | "green" | "red";
  name: string;
  params: string;
  width: number;
}): React.ReactElement {
  const { mode } = useRawModeContext();
  const containerWidth = Math.max(1, width - 2);
  const contentWidth = Math.max(1, width - 4);
  return (
    <Box gap={1} width={containerWidth}>
      <Box alignSelf="stretch">
        <Text key="bullet" color={bulletColor}>
          ✧
        </Text>
      </Box>
      <Box flexGrow={1} width={contentWidth} gap={1}>
        <Text wrap={mode === RawMode.Lite ? "truncate-end" : "wrap"}>
          <Text key="name" bold>
            {name}
          </Text>
          {params ? (
            <Text key="params" color="white">
              {` ${params}`}
            </Text>
          ) : null}
        </Text>
      </Box>
    </Box>
  );
}

function DiffPreview({ lines }: { lines: DiffPreviewLine[] }): React.ReactElement {
  return (
    <Box flexDirection="column" marginLeft={2}>
      <Text dimColor>└ Changes</Text>
      <Box flexDirection="column" marginLeft={2}>
        {lines.map((line, index) => (
          <Text key={`${index}-${line.marker}-${line.content}`} wrap="truncate-end">
            <Text color={line.kind === "added" ? "green" : line.kind === "removed" ? "red" : "gray"}>
              {line.marker}
            </Text>
            <Text color={line.kind === "added" ? "green" : line.kind === "removed" ? "red" : undefined}>
              {line.content}
            </Text>
          </Text>
        ))}
      </Box>
    </Box>
  );
}

function PlanPreview({ lines }: { lines: string[] }): React.ReactElement {
  return (
    <Box flexDirection="column" marginLeft={2}>
      <Text dimColor>└ Plan</Text>
      <Box flexDirection="column" marginLeft={2}>
        {lines.map((line, index) => (
          <Text key={`${index}-${line}`} wrap="wrap">
            {line}
          </Text>
        ))}
      </Box>
    </Box>
  );
}