Chat Main

1"use client";
2 
3import { useState } from "react";
4import { ChatWelcomeScreen } from "./chat-welcome-screen";
5import { ChatConversationView } from "./chat-conversation-view";
6 
7interface Message {
8  id: string;
9  content: string;
10  sender: "user" | "ai";
11  timestamp: Date;
12}
13 
14export function ChatMain() {
15  const [message, setMessage] = useState("");
16  const [selectedMode, setSelectedMode] = useState("fast");
17  const [selectedModel, setSelectedModel] = useState("square-3");
18  const [isConversationStarted, setIsConversationStarted] = useState(false);
19  const [messages, setMessages] = useState<Message[]>([]);
20 
21  const handleSend = () => {
22    if (!message.trim()) return;
23 
24    setIsConversationStarted(true);
25 
26    setMessages([
27      {
28        id: "1",
29        content: message,
30        sender: "user",
31        timestamp: new Date(),
32      },
33      {
34        id: "2",
35        content:
36          "Hello! I'm Square AI, your intelligent assistant. I'm here to help you with anything you need. How can I assist you today?",
37        sender: "ai",
38        timestamp: new Date(),
39      },
40    ]);
41    setMessage("");
42  };
43 
44  const handleReset = () => {
45    setIsConversationStarted(false);
46    setMessages([]);
47    setMessage("");
48  };
49 
50  const handleSendMessage = (content: string) => {
51    setMessages([
52      ...messages,
53      {
54        id: Date.now().toString(),
55        content,
56        sender: "user",
57        timestamp: new Date(),
58      },
59    ]);
60    setMessage("");
61  };
62 
63  if (isConversationStarted) {
64    return (
65      <ChatConversationView
66        messages={messages}
67        message={message}
68        onMessageChange={setMessage}
69        onSend={handleSendMessage}
70        onReset={handleReset}
71      />
72    );
73  }
74 
75  return (
76    <ChatWelcomeScreen
77      message={message}
78      onMessageChange={setMessage}
79      onSend={handleSend}
80      selectedMode={selectedMode}
81      onModeChange={setSelectedMode}
82      selectedModel={selectedModel}
83      onModelChange={setSelectedModel}
84    />
85  );
86}