'use client'; import { memo, useState } from 'react'; import { Box, Button, Text, Textarea, IconButton } from '@chakra-ui/react'; import ReactMarkdown from 'react-markdown'; import remarkGfm from 'remark-gfm'; import { DataTable } from './DataTable'; import type { Message, AgentStep } from '../_types/chat'; import { useChatStore } from '../_store/useChatStore'; import { useSendChat } from '../_hooks/useSendChat'; /** Isolated component so only this subscribes to isSending — not every ChatMessage. */ function AcceptPlanButton() { const isSending = useChatStore((s) => s.isSending); const sendChat = useSendChat(); if (isSending) return null; return ( ); } function SavedStepsLog({ steps }: { steps: AgentStep[] }) { return ( {steps.map((step) => ( {step.label} {step.exitText && ( {step.exitText} )} ))} ); } function FeedbackButtons({ message }: { message: Message }) { const [showComment, setShowComment] = useState(false); const [comment, setComment] = useState(''); const setMessageFeedback = useChatStore((s) => s.setMessageFeedback); const submitFeedback = useChatStore((s) => s.submitFeedback); const conversationId = useChatStore((s) => s.conversationId); const handleThumb = async (value: 'up' | 'down') => { if (message.feedback === value) return; setMessageFeedback(message.id, value); if (value === 'up') { setShowComment(false); setComment(''); await submitFeedback(conversationId, 1); } else { setShowComment(true); } }; const handleCommentSubmit = async () => { setShowComment(false); await submitFeedback(conversationId, 0, comment || undefined); }; const thumbColor = (thumb: 'up' | 'down') => message.feedback === thumb ? (thumb === 'up' ? 'green.400' : 'red.400') : 'gray.500'; return ( } size="xs" variant="ghost" onClick={() => handleThumb('up')} title="Good response" /> } size="xs" variant="ghost" onClick={() => handleThumb('down')} title="Bad response" /> {showComment && (

setComment(e.target.value)}
            rows={2}
            bg="gray.900"
            borderColor="gray.600"
            color="gray.200"
            fontSize="sm"
            resize="none"
          />
          <Box display="flex" gap={2} mt={1}>
            <Button size="xs" colorScheme="red" onClick={handleCommentSubmit}>
              Submit
            </Button>
            <Button size="xs" variant="ghost" color="gray.500" onClick={() => { setShowComment(false); submitFeedback(conversationId, 0); }}>
              Skip
            </Button>
          </Box>
        </Box>
      )}
    </Box>
  );
}

function CopyButton({ content }: { content: string }) {
  const [copied, setCopied] = useState(false);

const handleCopy = async () => {
    await navigator.clipboard.writeText(content);
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  };

return (
    <IconButton
      aria-label="Copy message"
      icon={
        copied ? (
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#68D391" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
            <polyline points="20 6 9 17 4 12" />
          </svg>
        ) : (
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#718096" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
            <rect x="9" y="9" width="13" height="13" rx="2" ry="2" /><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" />
          </svg>
        )
      }
      size="xs"
      variant="ghost"
      onClick={handleCopy}
      title={copied ? 'Copied!' : 'Copy message'}
    />
  );
}

interface ChatMessageProps {
  message: Message;
  isLastMessage?: boolean;
}

export const ChatMessage = memo(function ChatMessage({ message, isLastMessage }: ChatMessageProps) {
  const apiBase = useChatStore((s) => s.apiBase);
  const isUser = message.type === 'user';
  const isError = message.type === 'error';

if (message.type === 'divider') {
    return (
      <Box display="flex" alignItems="center" my={4} gap={3}>
        <Box flex={1} h="1px" bg="gray.600" />
        <Text fontSize="xs" color="gray.500" textTransform="uppercase" letterSpacing="wide" flexShrink={0}>
          {message.content}
        </Text>
        <Box flex={1} h="1px" bg="gray.600" />
      </Box>
    );
  }

if (isUser) {
    return (
      <Box display="flex" justifyContent="flex-end" mb={5}>
        <Box
          bg="gray.700"
          color="white"
          px={4}
          py={3}
          borderRadius="xl"
          borderBottomRightRadius="sm"
          maxW="80%"
          wordBreak="break-word"
          userSelect="text"
        >
          <Text>{message.content}</Text>
        </Box>
      </Box>
    );
  }

if (isError) {
    return (
      <Box mb={5}>
        <Box
          bg="red.900"
          border="1px solid"
          borderColor="red.600"
          px={4}
          py={3}
          borderRadius="xl"
          color="red.200"
          maxW="90%"
          userSelect="text"
        >
          <Text as="span" fontWeight={600} color="red.300">
            Error:{' '}
          </Text>
          {message.content}
        </Box>
      </Box>
    );
  }

// assistant or system
  const isSystem = message.type === 'system';

return (
    <Box mb={5}>
      {message.steps && message.steps.length > 0 && (
        <SavedStepsLog steps={message.steps} />
      )}
      <Box
        position="relative"
        bg="gray.800"
        border="1px solid"
        borderColor="gray.600"
        pl={4}
        pr={isSystem ? 4 : 7}
        py={3}
        borderRadius="xl"
        borderBottomLeftRadius="sm"
        maxW="90%"
        color={isSystem ? 'gray.400' : 'gray.100'}
        fontStyle={isSystem ? 'italic' : 'normal'}
        userSelect="text"
        sx={{
          '& p': { mb: 2 },
          '& p:last-child': { mb: 0 },
          '& ul, & ol': { pl: 5, my: 2 },
          '& li': { mb: 1 },
          '& strong': { color: 'white' },
          '& a': { color: 'blue.300', textDecoration: 'underline' },
          '& code': { bg: 'gray.700', px: 1, borderRadius: 'sm', fontSize: 'sm' },
          '& pre': { bg: 'gray.900', p: 3, borderRadius: 'md', overflowX: 'auto', my: 2 },
          '& blockquote': { borderLeft: '3px solid', borderColor: 'gray.500', pl: 3, color: 'gray.400' },
        }}
      >
        {!isSystem && message.type === 'assistant' && (
          <Box position="absolute" top={1} right={1}>
            <CopyButton content={message.content} />
          </Box>
        )}
        <ReactMarkdown remarkPlugins={[remarkGfm]}>{message.content}</ReactMarkdown>

{message.data && <DataTable data={message.data} downloadToken={message.downloadToken} apiBase={apiBase} />}
      </Box>

{message.isPlan && isLastMessage && <AcceptPlanButton />}
      {!isSystem && isLastMessage && message.type === 'assistant' && <FeedbackButtons message={message} />}
    </Box>
  );
});
</article></body></html>