Ai Conversation

'use client';

import { type ComponentProps, memo } from 'react';
import { useCallback } from 'react';

import Box from '@mui/material/Box';
import IconButton from '@mui/material/IconButton';
import Typography from '@mui/material/Typography';
import { ArrowDownIcon } from 'lucide-react';
import { StickToBottom, useStickToBottomContext } from 'use-stick-to-bottom';

export type ConversationProps = ComponentProps<typeof StickToBottom>;

export const Conversation = memo(({ ...props }: ConversationProps) => (
  <StickToBottom
    style={{
      position: 'relative',
      flex: 1,
      overflowY: 'auto',
    }}
    initial="smooth"
    resize="smooth"
    role="log"
    {...props}
  />
));

Conversation.displayName = 'Conversation';

export type ConversationContentProps = ComponentProps<
  typeof StickToBottom.Content
>;

export const ConversationContent = ({ ...props }: ConversationContentProps) => (
  <StickToBottom.Content
    style={{
      padding: '16px',
    }}
    {...props}
  />
);

export type ConversationEmptyStateProps = ComponentProps<typeof Box> & {
  title?: string;
  description?: string;
  icon?: React.ReactNode;
};

export const ConversationEmptyState = ({
  title = 'No messages yet',
  description = 'Start a conversation to see messages here',
  icon,
  children,
  sx,
  ...props
}: ConversationEmptyStateProps) => (
  <Box
    sx={{
      display: 'flex',
      width: '100%',
      height: '100%',
      flexDirection: 'column',
      alignItems: 'center',
      justifyContent: 'center',
      gap: 3,
      p: 8,
      textAlign: 'center',
      ...sx,
    }}
    {...props}
  >
    {children ?? (
      <>
        {icon && <Box sx={{ color: 'text.secondary' }}>{icon}</Box>}
        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}>
          <Typography variant="body2" sx={{ fontWeight: 500 }}>
            {title}
          </Typography>
          {description && (
            <Typography variant="body2" sx={{ color: 'text.secondary' }}>
              {description}
            </Typography>
          )}
        </Box>
      </>
    )}
  </Box>
);

export type ConversationScrollButtonProps = ComponentProps<typeof IconButton>;

export const ConversationScrollButton = ({
  sx,
  ...props
}: ConversationScrollButtonProps) => {
  const { isAtBottom, scrollToBottom } = useStickToBottomContext();

  const handleScrollToBottom = useCallback(() => {
    scrollToBottom();
  }, [scrollToBottom]);

  return (
    !isAtBottom && (
      <IconButton
        onClick={handleScrollToBottom}
        sx={{
          position: 'absolute',
          bottom: 16,
          left: '50%',
          transform: 'translateX(-50%)',
          bgcolor: 'background.paper',
          color: 'text.primary',
          border: 1,
          borderColor: 'divider',
          '&:hover': {
            bgcolor: 'action.hover',
          },
          '&:active': {
            transform: 'translateX(-50%) scale(0.95)',
          },
          ...sx,
        }}
        {...props}
      >
        <ArrowDownIcon className="size-4" />
      </IconButton>
    )
  );
};

export * from './ai-conversation';