38648ae5f4
- Add SessionManager class to handle PTY sessions with WebSocket connections. - Implement methods for creating, retrieving, and destroying sessions. - Handle PTY output and WebSocket messages for terminal interaction. - Ensure graceful session destruction and cleanup. feat: initialize web application with Next.js and Tailwind CSS - Create initial Next.js application structure with TypeScript support. - Set up Tailwind CSS for styling with custom theme configurations. - Add ESLint configuration for code quality and consistency. feat: implement chat API and UI components - Create chat API route to handle chat requests and responses. - Develop chat layout with sidebar, header, chat window, and input components. - Integrate Zustand for state management of conversations and messages. - Add utility functions for formatting dates and managing class names. chore: add environment variables and configuration files - Create .env.example for environment variable setup. - Add configuration files for PostCSS, Tailwind CSS, and TypeScript. - Set up package.json with necessary dependencies and scripts for development.
49 lines
1.5 KiB
TypeScript
49 lines
1.5 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useRef } from "react";
|
|
import { useChatStore } from "@/lib/store";
|
|
import { MessageBubble } from "./MessageBubble";
|
|
import { Bot } from "lucide-react";
|
|
|
|
interface ChatWindowProps {
|
|
conversationId: string;
|
|
}
|
|
|
|
export function ChatWindow({ conversationId }: ChatWindowProps) {
|
|
const bottomRef = useRef<HTMLDivElement>(null);
|
|
const { conversations } = useChatStore();
|
|
const conversation = conversations.find((c) => c.id === conversationId);
|
|
const messages = conversation?.messages ?? [];
|
|
|
|
useEffect(() => {
|
|
bottomRef.current?.scrollIntoView({ behavior: "smooth" });
|
|
}, [messages.length]);
|
|
|
|
if (messages.length === 0) {
|
|
return (
|
|
<div className="flex-1 flex flex-col items-center justify-center gap-4 text-center px-6">
|
|
<div className="w-12 h-12 rounded-full bg-brand-600/20 flex items-center justify-center">
|
|
<Bot className="w-6 h-6 text-brand-400" />
|
|
</div>
|
|
<div>
|
|
<h2 className="text-lg font-semibold text-surface-100">How can I help?</h2>
|
|
<p className="text-sm text-surface-400 mt-1">
|
|
Start a conversation with Claude Code
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="flex-1 overflow-y-auto">
|
|
<div className="max-w-3xl mx-auto py-6 px-4 space-y-6">
|
|
{messages.map((message) => (
|
|
<MessageBubble key={message.id} message={message} />
|
|
))}
|
|
<div ref={bottomRef} />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|