components/chat/ChatList.tsx

'use client';

import { Separator } from '@/components/ui/Separator';
import { ChatMessage } from '@/components/chat/ChatMessage';
import { MessageBase } from '../../lib/types';
import { Session } from 'next-auth';
import { IconExclamationTriangle } from '../ui/Icons';
import Link from 'next/link';

export interface ChatList {
  messages: MessageBase[];
  session: Session | null;
  isLoading: boolean;
}

export function ChatList({ messages, session, isLoading }: ChatList) {
  return (
    <div className="relative mx-auto max-w-5xl px-8 pr-12">
      {!session && (
        <>
          <div className="group relative mb-4 flex items-center">
            <div className="bg-background flex size-8 shrink-0 select-none items-center justify-center rounded-md border shadow">
              <IconExclamationTriangle />
            </div>
            <div className="flex-1 px-1 ml-4 space-y-2 overflow-hidden">
              {process.env.NEXT_PUBLIC_IS_HUGGING_FACE ? (
                <p className="text-muted-foreground leading-normal">
                  Please visit and login into{' '}
                  <Link
                    href="https://va.landing.ai/"
                    target="_blank"
                    className="underline"
                  >
                    our landing website
                  </Link>{' '}
                  to save and revisit your chat history!
                </p>
              ) : (
                <p className="text-muted-foreground leading-normal">
                  Please{' '}
                  <Link href="/sign-in" className="underline">
                    log in
                  </Link>{' '}
                  to save and revisit your chat history!
                </p>
              )}
            </div>
          </div>
          <Separator className="my-4" />
        </>
      )}
      {messages
        // .filter(message => message.role !== 'system')
        .map((message, index) => (
          <div key={index}>
            <ChatMessage
              message={message}
              isLoading={isLoading && index === messages.length - 1}
            />
            {index < messages.length - 1 && (
              <Separator className="my-4 md:my-8" />
            )}
          </div>
        ))}
    </div>
  );
}