chatui

frontend/app/routes/chat/$id.tsx

@@ -1,88 +1,31 @@
-import { useState } from "react";
-import { useParams } from "react-router";
-import { Button } from "~/components/ui/button";
-
-interface Message {
-  id: number;
-  content: string;
-  sender: "user" | "assistant";
-  timestamp: Date;
-}
+import { ChatInput } from "~/components/chat/chat-input"
+import { Thinking } from "~/components/chat/thinking"
 
 export default function ChatSession() {
-  const { id } = useParams();
-  const [messages, setMessages] = useState<Message[]>([
-    {
-      id: 1,
-      content: "Hello! How can I help you today?",
-      sender: "assistant",
-      timestamp: new Date(),
-    },
-  ]);
-  const [inputMessage, setInputMessage] = useState("");
-
-  const handleSendMessage = (e: React.FormEvent) => {
-    e.preventDefault();
-    if (!inputMessage.trim()) return;
-
-    const newMessage: Message = {
-      id: messages.length + 1,
-      content: inputMessage,
-      sender: "user",
-      timestamp: new Date(),
-    };
-
-    setMessages([...messages, newMessage]);
-    setInputMessage("");
-  };
-
   return (
     <div className="flex h-full flex-col">
-      {/* Messages area */}
-      <div className="flex-1 overflow-y-auto p-4 space-y-4">
-        {messages.map((message) => (
-          <div
-            key={message.id}
-            className={`flex ${message.sender === "user" ? "justify-end" : "justify-start"}`}
-          >
-            <div
-              className={`max-w-[70%] rounded-lg p-3 ${
-                message.sender === "user"
-                  ? "bg-zinc-900 text-white border border-zinc-800"
-                  : "bg-black text-white border border-zinc-800"
-              }`}
-            >
-              <p>{message.content}</p>
-              <p className="mt-1 text-xs text-zinc-400">
-                {message.timestamp.toLocaleTimeString()}
-              </p>
-            </div>
+      {/* Main content area */}
+      <div className="flex-1 overflow-y-auto">
+        <div className="mx-auto max-w-3xl w-full">
+          {/* Thinking component */}
+          <div className="p-4">
+            <Thinking
+              state="thinking"
+              duration={3}
+              content={[
+                "Analyzing your request...",
+                "Processing information...",
+                "Preparing response..."
+              ]}
+            />
           </div>
-        ))}
+        </div>
       </div>
 
-      {/* Input area */}
-      <form
-        onSubmit={handleSendMessage}
-        className="border-t border-zinc-800 p-4"
-      >
-        <div className="flex gap-2">
-          <input
-            type="text"
-            value={inputMessage}
-            onChange={(e) => setInputMessage(e.target.value)}
-            placeholder="Type your message..."
-            className="flex-1 rounded-lg bg-zinc-900 px-4 py-2 text-white border border-zinc-800 focus:outline-none focus:ring-2 focus:ring-zinc-700"
-          />
-          <Button
-            type="submit"
-            variant="outline"
-            className="bg-zinc-900 border-zinc-800 hover:bg-zinc-800"
-          >
-            Send
-          </Button>
-        </div>
-      </form>
+      {/* Chat input at bottom */}
+      <div className="p-4">
+        <ChatInput />
+      </div>
     </div>
   );
 }

frontend/app/routes/chat/_layout.tsx

@@ -1,51 +1,22 @@
-import { Outlet, useLocation } from "react-router";
-import { HeaderBar } from "~/components/header-bar";
-import { Button } from "~/components/ui/button";
+import { Outlet } from "react-router"
+import { HeaderBar } from "~/components/header-bar"
 
 import type { Route } from "../../+types/root";
 
-export function meta({}: Route.MetaArgs) {
+export function meta({ }: Route.MetaArgs) {
   return [
     { title: "OpenAgents - Chat" },
     { name: "description", content: "Chat with OpenAgents" },
   ];
 }
 
 export default function ChatLayout() {
-  const location = useLocation();
-  const isSessionView = location.pathname !== "/chat";
-
   return (
     <div className="dark fixed inset-0 flex flex-col bg-background text-foreground">
       <HeaderBar />
 
       {/* Main chat area */}
       <div className="flex flex-1 overflow-hidden">
-        {/* Sidebar - only show in chat session view */}
-        {isSessionView && (
-          <div className="flex-shrink-0 w-64 border-r border-zinc-800 bg-black overflow-y-auto">
-            <div className="p-4">
-              <h2 className="mb-4 text-sm font-semibold text-zinc-400">
-                Recent Chats
-              </h2>
-              <div className="space-y-2">
-                <Button
-                  variant="outline"
-                  className="w-full justify-start bg-zinc-900 hover:bg-zinc-800 border-zinc-800"
-                >
-                  Chat #1
-                </Button>
-                <Button
-                  variant="outline"
-                  className="w-full justify-start bg-zinc-900 hover:bg-zinc-800 border-zinc-800"
-                >
-                  Chat #2
-                </Button>
-              </div>
-            </div>
-          </div>
-        )}
-
         {/* Chat content area */}
         <div className="flex-1 min-w-0 overflow-y-auto">
           <Outlet />