// import { Message } from '@aigxion/isdk'

import { Separator } from '@/components/ui/separator'
import { ChatMessage } from '@/components/chat-message'
import { filterMessages } from '@/lib/utils'
import { Message } from '@aigxion/isdk'
import { useEffect, useRef } from 'react'

export interface ChatList {
  messages: Message[]
  avatarUrl?: string | null | undefined
}

export function ChatList({ messages, avatarUrl }: ChatList) {
  // Remove system messages and function returns from the list
  const filteredMessages = filterMessages(messages)

  // const scrollContainer = useRef<HTMLDivElement>(null)



  // const scrollToBottom = React.useCallback(() => {
  //   if (!scrollContainer.current || !pinnedScroll.current) return
  //   scrollContainer.current.scrollTop = scrollContainer.current.scrollHeight
  // }, [])

  console.log("--------", messages)
  return (
    <div className="relative mx-auto max-w-2xl px-2 mb-[6rem]" >
      {filteredMessages.map((message, index) => (
        <div key={index}>
          <ChatMessage message={message} avatarUrl={avatarUrl} />
          {index < filteredMessages.length - 1 && (
            <Separator className="my-4 md:my-8" />
          )}
        </div>
      ))}
    </div>
  )
}