Function ChatInterface

ui/app/components/chatInterface.tsx:15–126

({
  isLoading,
  appendMessage,
  visibleMessages
}: {
  isLoading: boolean
  appendMessage: (message: TextMessage) => void
  visibleMessages: TextMessage[]
})

export default function ChatInterface({
  isLoading,
  appendMessage,
  visibleMessages
}: {
  isLoading: boolean
  appendMessage: (message: TextMessage) => void
  visibleMessages: TextMessage[]
}) {
  const messagesEndRef = useRef<HTMLDivElement>(null)
  const [inputValue, setInputValue] = useState("")

  const scrollToBottom = () => {
    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" })
  }



  useEffect(() => {
    const textarea = document.querySelector('textarea');
    if (textarea) {
      textarea.style.height = 'auto';
      textarea.style.height = `${Math.min(textarea.scrollHeight, 120)}px`;
    }
  }, [inputValue]);

  useEffect(() => {
    scrollToBottom();
  }, [visibleMessages]);

  const handleSendMessage = () => {
    if (inputValue.trim()) {
      appendMessage(new TextMessage({
        content: inputValue,
        role: Role.User
      }))
      setInputValue("")
    }
  }



  return (
    <Card className="bg-[#cdcdd5] dark:bg-[#191A19] flex flex-col overflow-hidden">
      <CardContent className="flex flex-col h-[calc(100vh-200px)] overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-track]:rounded-full p-4 space-y-4">
        {visibleMessages.map((message) => message.content && (
          <div
            key={message.id}
            className={cn("flex items-start gap-2 group", {
              "justify-end": (message.role === "user"),
            })}
          >
            {(message.role === "assistant") && (
              <Avatar className="w-8 h-8">
                <AvatarImage src="/rdj.jpg" />
                <AvatarFallback>AI</AvatarFallback>
              </Avatar>
            )}