feat(frontend): add initial frontend structure with components, services, and assets
This commit is contained in:
Davidson Gomes
190
frontend/app/chat/components/ChatContainer.tsx
Normal file
190
frontend/app/chat/components/ChatContainer.tsx
Normal file
@@ -0,0 +1,190 @@
|
||||
/*
|
||||
┌──────────────────────────────────────────────────────────────────────────────┐
|
||||
│ @author: Davidson Gomes │
|
||||
│ @file: /app/chat/components/ChatContainer.tsx │
|
||||
│ Developed by: Davidson Gomes │
|
||||
│ Creation date: May 14, 2025 │
|
||||
│ Contact: contato@evolution-api.com │
|
||||
├──────────────────────────────────────────────────────────────────────────────┤
|
||||
│ @copyright © Evolution API 2025. All rights reserved. │
|
||||
│ Licensed under the Apache License, Version 2.0 │
|
||||
│ │
|
||||
│ You may not use this file except in compliance with the License. │
|
||||
│ You may obtain a copy of the License at │
|
||||
│ │
|
||||
│ http://www.apache.org/licenses/LICENSE-2.0 │
|
||||
│ │
|
||||
│ Unless required by applicable law or agreed to in writing, software │
|
||||
│ distributed under the License is distributed on an "AS IS" BASIS, │
|
||||
│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. │
|
||||
│ See the License for the specific language governing permissions and │
|
||||
│ limitations under the License. │
|
||||
├──────────────────────────────────────────────────────────────────────────────┤
|
||||
│ @important │
|
||||
│ For any future changes to the code in this file, it is recommended to │
|
||||
│ include, together with the modification, the information of the developer │
|
||||
│ who changed it and the date of modification. │
|
||||
└──────────────────────────────────────────────────────────────────────────────┘
|
||||
*/
|
||||
"use client";
|
||||
|
||||
import React, { useRef, useEffect, useState } from "react";
|
||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
import { MessageSquare, Loader2, Bot, Zap } from "lucide-react";
|
||||
import { ChatMessage } from "./ChatMessage";
|
||||
import { ChatInput } from "./ChatInput";
|
||||
import { ChatMessage as ChatMessageType } from "@/services/sessionService";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface FunctionMessageContent {
|
||||
title: string;
|
||||
content: string;
|
||||
author?: string;
|
||||
}
|
||||
|
||||
interface ChatContainerProps {
|
||||
messages: ChatMessageType[];
|
||||
isLoading: boolean;
|
||||
onSendMessage: (message: string) => void;
|
||||
agentColor: string;
|
||||
expandedFunctions: Record<string, boolean>;
|
||||
toggleFunctionExpansion: (messageId: string) => void;
|
||||
containsMarkdown: (text: string) => boolean;
|
||||
getMessageText: (message: ChatMessageType) => string | FunctionMessageContent;
|
||||
agentName?: string;
|
||||
containerClassName?: string;
|
||||
messagesContainerClassName?: string;
|
||||
inputContainerClassName?: string;
|
||||
sessionId?: string;
|
||||
}
|
||||
|
||||
export function ChatContainer({
|
||||
messages,
|
||||
isLoading,
|
||||
onSendMessage,
|
||||
agentColor,
|
||||
expandedFunctions,
|
||||
toggleFunctionExpansion,
|
||||
containsMarkdown,
|
||||
getMessageText,
|
||||
agentName = "Agent",
|
||||
containerClassName = "",
|
||||
messagesContainerClassName = "",
|
||||
inputContainerClassName = "",
|
||||
sessionId,
|
||||
}: ChatContainerProps) {
|
||||
const messagesContainerRef = useRef<HTMLDivElement>(null);
|
||||
const [isInitializing, setIsInitializing] = useState(false);
|
||||
|
||||
const scrollToBottom = () => {
|
||||
if (messagesContainerRef.current) {
|
||||
messagesContainerRef.current.scrollTop = messagesContainerRef.current.scrollHeight;
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (messages.length > 0) {
|
||||
setTimeout(scrollToBottom, 100);
|
||||
}
|
||||
}, [messages]);
|
||||
|
||||
// Simulate initial loading for smoother UX
|
||||
useEffect(() => {
|
||||
if (sessionId) {
|
||||
setIsInitializing(true);
|
||||
const timer = setTimeout(() => {
|
||||
setIsInitializing(false);
|
||||
}, 1000);
|
||||
return () => clearTimeout(timer);
|
||||
}
|
||||
}, [sessionId]);
|
||||
|
||||
const isEmpty = messages.length === 0;
|
||||
|
||||
return (
|
||||
<div className={cn(
|
||||
"flex-1 flex flex-col overflow-hidden bg-gradient-to-b from-neutral-900 to-neutral-950",
|
||||
containerClassName
|
||||
)}>
|
||||
<div
|
||||
className={cn(
|
||||
"flex-1 overflow-hidden p-5",
|
||||
messagesContainerClassName
|
||||
)}
|
||||
style={{ filter: isLoading && !isInitializing ? "blur(1px)" : "none" }}
|
||||
>
|
||||
<ScrollArea
|
||||
ref={messagesContainerRef}
|
||||
className="h-full pr-4"
|
||||
>
|
||||
{isInitializing ? (
|
||||
<div className="flex flex-col items-center justify-center h-full">
|
||||
<div className="w-12 h-12 rounded-full bg-gradient-to-br from-emerald-500 to-emerald-700 flex items-center justify-center shadow-lg mb-4 animate-pulse">
|
||||
<Zap className="h-5 w-5 text-white" />
|
||||
</div>
|
||||
<p className="text-neutral-400 mb-2">Loading conversation...</p>
|
||||
<div className="flex items-center space-x-2">
|
||||
<span className="w-2 h-2 rounded-full bg-emerald-500 animate-bounce"
|
||||
style={{ animationDelay: '0ms' }}></span>
|
||||
<span className="w-2 h-2 rounded-full bg-emerald-500 animate-bounce"
|
||||
style={{ animationDelay: '150ms' }}></span>
|
||||
<span className="w-2 h-2 rounded-full bg-emerald-500 animate-bounce"
|
||||
style={{ animationDelay: '300ms' }}></span>
|
||||
</div>
|
||||
</div>
|
||||
) : isEmpty ? (
|
||||
<div className="h-full flex flex-col items-center justify-center text-center p-6">
|
||||
<div className="w-14 h-14 rounded-full bg-gradient-to-br from-blue-500/20 to-emerald-500/20 flex items-center justify-center shadow-lg mb-5 border border-emerald-500/30">
|
||||
<MessageSquare className="h-6 w-6 text-emerald-400" />
|
||||
</div>
|
||||
<h3 className="text-lg font-medium text-neutral-300 mb-2">
|
||||
{`Chat with ${agentName}`}
|
||||
</h3>
|
||||
<p className="text-neutral-500 text-sm max-w-md">
|
||||
Type your message below to start the conversation. This chat will help you interact with the agent and explore its capabilities.
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-6 py-4 flex-1">
|
||||
{messages.map((message) => {
|
||||
const messageContent = getMessageText(message);
|
||||
const isExpanded = expandedFunctions[message.id] || false;
|
||||
|
||||
return (
|
||||
<ChatMessage
|
||||
key={message.id}
|
||||
message={message}
|
||||
agentColor={agentColor}
|
||||
isExpanded={isExpanded}
|
||||
toggleExpansion={toggleFunctionExpansion}
|
||||
containsMarkdown={containsMarkdown}
|
||||
messageContent={messageContent}
|
||||
sessionId={sessionId}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</ScrollArea>
|
||||
</div>
|
||||
|
||||
<div className={cn(
|
||||
"p-3 border-t border-neutral-800 bg-neutral-900",
|
||||
inputContainerClassName
|
||||
)}>
|
||||
{isLoading && !isInitializing && (
|
||||
<div className="px-4 py-2 mb-3 rounded-lg bg-neutral-800/50 text-sm text-neutral-400 flex items-center">
|
||||
<Loader2 className="h-3 w-3 mr-2 animate-spin text-emerald-400" />
|
||||
Agent is thinking...
|
||||
</div>
|
||||
)}
|
||||
<ChatInput
|
||||
onSendMessage={onSendMessage}
|
||||
isLoading={isLoading}
|
||||
placeholder="Type your message..."
|
||||
autoFocus={true}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user