Chat Conversation View

1import { Button } from "@/components/ui/button";
2import { Textarea } from "@/components/ui/textarea";
3import { XIcon, PaperclipIcon } from "lucide-react";
4import { ChatMessage } from "./chat-message";
5 
6interface Message {
7  id: string;
8  content: string;
9  sender: "user" | "ai";
10  timestamp: Date;
11}
12 
13interface ChatConversationViewProps {
14  messages: Message[];
15  message: string;
16  onMessageChange: (value: string) => void;
17  onSend: (content: string) => void;
18  onReset: () => void;
19}
20 
21export function ChatConversationView({
22  messages,
23  message,
24  onMessageChange,
25  onSend,
26  onReset,
27}: ChatConversationViewProps) {
28  return (
29    <div className="flex h-full flex-col">
30      <div className="flex-1 overflow-y-auto px-4 md:px-8 py-8">
31        <div className="max-w-[640px] mx-auto space-y-6">
32          <div className="flex justify-end mb-2">
33            <Button
34              variant="secondary"
35              size="icon-sm"
36              onClick={onReset}
37              className="size-8 rounded-full border"
38            >
39              <XIcon className="size-4" />
40            </Button>
41          </div>
42          {messages.map((msg) => (
43            <ChatMessage key={msg.id} message={msg} />
44          ))}
45        </div>
46      </div>
47 
48      <div className="border-t border-border px-4 md:px-8 py-[17px]">
49        <div className="max-w-[640px] mx-auto">
50          <div className="rounded-2xl border border-border bg-secondary dark:bg-card p-1">
51            <div className="rounded-xl border border-border dark:border-transparent bg-card dark:bg-secondary">
52              <Textarea
53                placeholder="Continue the conversation..."
54                value={message}
55                onChange={(e) => onMessageChange(e.target.value)}
56                className="min-h-[80px] resize-none border-0 bg-transparent px-4 py-3 text-base placeholder:text-muted-foreground/60 focus-visible:ring-0 focus-visible:ring-offset-0"
57                onKeyDown={(e) => {
58                  if (e.key === "Enter" && !e.shiftKey) {
59                    e.preventDefault();
60                    if (message.trim()) {
61                      onSend(message);
62                    }
63                  }
64                }}
65              />
66 
67              <div className="flex items-center justify-between px-4 py-3 border-t border-border/50">
68                <div className="flex items-center gap-2">
69                  <Button
70                    variant="ghost"
71                    size="icon-sm"
72// … truncated